Customize Table in Bootstrap - css

I am creating an ecommerce website using the current Bootstrap version. On the admin panel I am trying to show all the product infos within a table in such a way that it looks like this :
+______+_____________+_____+_______+_____+
| name | description | qty | price | sku |
+______+_____________+_____+_______+_____+
| P1 | Description | 10 | 200 | 2ds |
+______+_____________+_____+_______+____ +
| Image 1 , Image 2 , Image 3, ...... |
+______+_____________+_____+_______+____ +
| P2 | Description | 14 | 500 | 3ds |
+______+_____________+_____+_______+____ +
| Image 1 , Image 2 , Image 3, ...... |
+______+_____________+_____+_______+____ +
| P3 | Description | 45 | 234 | 4xs |
+______+_____________+_____+_______+____ +
| Image 1 , Image 2 , Image 3, ...... |
+______+_____________+_____+_______+____ +
And so on. Hope I can make you understand what I am trying to do here. After every product row comes the product images.. then again another product row and its corresponding images and so on....
What I have tried :
<table class="table table-striped text-center">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Description</th>
<th>Stock Qty</th>
<th>Shown Qty</th>
<th>Sale Price</th>
<th>Original Price</th>
<th>SKU</th>
<th>Image</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Product</td>
<td>T Shirt</td>
<td>Description</td>
<td>24</td>
<td>500</td>
<td>BKSTU56V57</td>
</tr>
<tr><img src=".." /><img src="...."></tr>
</tbody>
</table>
And it's not working. taking the images to the top even before the <th>

You're missing the <td> element. Try this with column span:
<tr><td colspan="6"><img src=".." /><img src="...."></td></tr>

Related

Deduction List - ASP Arrays

I want to display a breakdown of total investment deductions as an array list. The total amount of deductions is $-20.24 and my list breakdown is not adding up to that amount. I'm not too sure where I got it wrong. Please review my code and provide feedback. See total value being returned below:
Date Units Unit price Value
30/04/2018 -4.203 $ 1.99143 $ -8.37
30/04/2018 -0.366 $ 1.99454 $ -0.73
30/04/2018 -1.576 $ 3.54061 $ -5.58
30/04/2018 -0.138 $ 3.55072 $ -0.49
30/04/2018 -1.871 $ 2.49065 $ -4.66
30/04/2018 -0.164 $ 2.50000 $ -0.41
Total amount $ 16.98
<%
Dim objMemberClient, SwitchList
set objMemberClient = Server.createObject("MemberServiceProxy")
SwitchList= objMemberClient.GetInvestmentTransactionObjList(session("MemberId"),session("FundCode"), request.Querystring("date"), request.Querystring("date"), request.Querystring("description"))
%>
<h1>Investments</h1>
<div class="table-responsive">
<%if request.Querystring("description") = "Deduction" then %>
<TABLE class="table">
<%for i = LBound(SwitchList) to UBound(SwitchList)%>
<%if SwitchList(i).DeductionCode = getDesc(request.Querystring("subtype")) then%>
<tr>
<%if SwitchList(i).DeductionSign = true then%>
<td class="table_Header" width="200px">Investment sold</td>
<%exit for%>
<%end if%>
<%end if%>
<%Next%>
<td class="table_Header" width="125px">Date</td>
<td class="table_Header" width="125px">Units</td>
<td class="table_Header" width="125px">Unit price</td>
<td class="table_Header" width="125px">Value</td>
</tr>
<%for i = LBound(SwitchList) to UBound(SwitchList)%>
<%if SwitchList(i).DeductionCode = getDesc(request.Querystring("subtype")) then%>
<tr>
<td valign="top" class="border_Bottom"> <%=SwitchList(i).InvestmentOption.Name%></td>
<td valign="top" class="border_Bottom"><%=SwitchList(i).InvestmentDate%></td>
<td valign="top" class="border_Bottom"> <%=SwitchList(i).NumberUnits%></td>
<%if SwitchList(i).DeductionSign = true then %>
<%total = total + SwitchList(i).SwitchOutDollarValue%>
<%total = total * -1%>
<td valign="top" class="border_Bottom">$ <%=FormatNumber(SwitchList(i).SwitchOutDollarValue/Replace(SwitchList(i).NumberUnits,"-",""),5)%></td>
<td valign="top" class="border_Bottom">$ -<%=FormatNumber(SwitchList(i).SwitchOutDollarValue,2)%></td>
<%end if%>
</TABLE>
It would be easier to debug if we had something we could execute, but just guessing I think your problem is here:
<%total = total + SwitchList(i).SwitchOutDollarValue%>
<%total = total * -1%>
Total is a negative value, SwitchOutDollarValue I believe is a positive value, so comibining them in this way is not going to get the result you want.
As #SearchAndResQ mentioned, I would remove <%total = total * -1%> from inside the for loop and move it to just before you display the total.

Render SQL result in twig file

How can i render result of following query in twig ?
$q = $em->createQuery('
SELECT mark, student.studentName FROM DemoTemplateBundle:TblMarkDetails mark, DemoTemplateBundle:TblStudentDetails student
WHERE student.id = mark.studentId'
);
$marks = $q->getArrayResult();
Table contents are
Table tbl_mark_details || tbl_student_details
---------------------------------------------------------------
id | student_id | exam_id | score || id | student name
1 |1 | 1 |10 || 1 | Student 1
2 |2 | 1 |5 || 2 | Student 2
3 |2 | 2 |25 ||
I tried the following code, but no student name for the third row
{% set i=0 %}
{% for mark in marks %}
{% if i%2 == 0 %}
<tr>
<td>{{ mark.score }}</td>
<td>{{ mark.examId }}</td>
{% else %}
<td>{{ mark.studentName }}</td>
</tr>
{% endif %}
{% set i = i+1 %}
{% endfor %}
Thanks
Vishnu V
Your should try like this :
$q = $em->createQuery('
SELECT mark, student FROM DemoTemplateBundle:TblMarkDetails mark, DemoTemplateBundle:TblStudentDetails student
WHERE student.id = mark.studentId'
);
$marks = $q->getResult();
and your twig is all right ..

Fixed and variable size columns in variable size table

I've looked all over for answers on how to do this, including dozens of answers on Stack Overflow that provide almost but not quite solutions.
I am trying to make a table/list with a number of options. Imagine a table with the following columns:
Delete: A simple icon. This must be a fixed width (because it uses an image)
Name: The name of the item in the list. This should fill the remaining available space, but if the text overflows, I want the ellipsis to appear.
Options A/B/C: You can imagine these are check boxes and also are a fixed with.
So on a wide table it'd look like this:
| X | Item 1 in the list | A | B | C |
| X | Item 2 | A | B | C |
| X | Item 3 has a pretty long name | A | B | C |
| X | Item 4's name is long, realll... | A | B | C |
And on a short table (or say, after the window resized):
| X | Item 1 in the list | A | B | C |
| X | Item 2 | A | B | C |
| X | Item 3 has a pretty... | A | B | C |
| X | Item 4's name is... | A | B | C |
If someone could provide a fiddle showing this in action, that'd be absolutely fantastic.
EDIT: Thank you so much Plymouth!
I've created a fiddle here.
These are the important styles:
table
{
table-layout:fixed;
}
.col2
{
width:auto;
text-overflow:ellipsis;
white-space: nowrap;
overflow: hidden;
}
Is this what you're after?

Multi-line table cell in reStructuredText?

Is there a way to input a newline into a table cell? For example, say I have a table like this:
+==========+==========+==========+
+ Header 1 + Header 2 + Header 3 +
+==========+==========+==========+
+ Item 1 + + +
+ Item 2 + + +
+----------+----------+----------+
I want the above to create a table with two rows, three columns, and the second row, first column to display Item 1 and Item 2 on separate lines.
I have tried the line blocks syntax |, but it doesn't work inside a table cell. I can use list syntax, but I don't want bullet points to appear.
First of all I think your table syntax is incorrect, should it not be:
+----------+----------+----------+
| Header 1 | Header 2 | Header 3 |
+==========+==========+==========+
| Item 1 | | |
| Item 2 | | |
+----------+----------+----------+
Note that the top row is made up of hyphens, not equal signs, and the rows are separated by pipes, |, not plus signs.
Now with this table, the line block syntax:
+----------+----------+----------+
| Header 1 | Header 2 | Header 3 |
+==========+==========+==========+
| | Item 1 | | |
| | Item 2 | | |
+----------+----------+----------+
seems to work: testing with Pandoc the bottom left cell gets transformed into the following HTML:
<td align="left">Item 1<br />Item 2</td>
Note the line break <br /> in between Item 1 and Item 2.
You can also leave a gap between the lines like this
+----------+----------+----------+
| Header 1 | Header 2 | Header 3 |
+==========+==========+==========+
| Item 1 | | |
| | | |
| Item 2 | | |
+----------+----------+----------+
This method tends to be friendlier with editors so they dont think you have accidentally added an extra pipe
I use the following syntax to create tables including multiline cells with sphinx:
.. list-table::
* - **HEADER1**
- **HEADER2**
- **HEADER3**
* - TEXT 1
- | MULTILINE
| TEXT
- | MULTILINE
| TEXT 2
I use line blocks with beginning | to preserve the line-breaks.

referencing tables in restructuredtext

Is there anyway to refer a table in RestructuredText? something like see table `referencetable`_
(I saw some workarounds for referencing figures. couldn't find a way to refer a table though .. )
Thanks!
You can simply define a hyperlink target.
Here is table-1_.
.. _table-1:
+------------+------------+-----------+
| Header 1 | Header 2 | Header 3 |
+============+============+===========+
| body row 1 | column 2 | column 3 |
+------------+------------+-----------+
| body row 2 | Cells may span columns.|
+------------+------------+-----------+
| body row 3 | Cells may | - Cells |
+------------+ span rows. | - contain |
| body row 4 | | - blocks. |
+------------+------------+-----------+

Resources