How to create a table inside another table in Bootstrap-3. I tried but it displays after the first table.
You need to do as below
<table class="table table-bordered">
<th colspan="3">Outer Table</th>
<tr>
<td>This is row one, column 1</td>
<td>This is row one, column 2</td>
<td>
<table class="table table-bordered">
<th colspan="3">Inner Table</th>
<tr>
<td>This is row one, column 1</td>
<td>This is row one, column 2</td>
<td>This is row one, column 3</td>
</tr>
</table>
</td>
</tr>
</table>
Demo : http://jsbin.com/qilebevo/1/
Related
I'm using Bootstrap Table to sort some columns. One column has an article title that links to the article itself. I obviously want to be able to sort by title, but it's sorting by the content of the cell as seen in the source code (the link and the title) rather than the visible text (the title.)
<table class="table table-bordered table-striped table-hover table-sortable">
<thead>
<th data-sortable="true">Title</th>
<th>Description</th>
<th data-sortable="true">Posted</th>
</thead>
<tbody>
<tr>
<td data-sortable="true">Article C</td>
<td data-sortable="true">This is description 1</td>
<td data-sortable="true">9/26/2019</td>
</tr>
<tr>
<td data-sortable="true">Article A</td>
<td data-sortable="true">This is description 2</td>
<td data-sortable="true">4/27/2018</td>
</tr>
<tr>
<td data-sortable="true">Article B</td>
<td data-sortable="true">This is description 3</td>
<td data-sortable="true">8/26/2017</td>
</tr>
</tbody>
</table>
In the example it loads as C, A, B. After hitting the sort button I'd expect it to be A, B, C but it sorts as C, B, A (corresponding to 1, 2, 3 in the links.)
Fiddle: https://jsfiddle.net/melisunde/edkz6cv2/11/
Is there a way to have Bootstrap Table ignore the link? This doesn't appear to be addressed in the site's examples. Thanks!
I'm trying to make a single row with one single column occupy entire space of a row, and no a single column space:
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td>ONE LINE</td> #THIS ONE I WANT TO OCCUPY SPACE OF 4 TDs
</tr>
</tbody>
</table>
I already tried it:
<td style="width:100%">ONE LINE</td>
and
<tr style="width:100%">
<td>ONE LINE</td>
</tr>
You can use the colspan attribute
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td colspan="4">ONE LINE</td>
</tr>
</tbody>
</table>
I know I could do this easily by specifying an id but I want to practice with pseudo selectors.
I have two tables within a view. Using pseudo selectors:
I want to grab the first table only.
within that first table's <tbody>
I want to grab the first <tr> and color all the text red.
My current implementation almost works. The issue is that it does this styling for every table in the view. I want this styling to happen only for the first table.
tbody tr:first-child {
color: red;
}
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T1 R1 Col 1</td>
<td>This row should all be red</td>
</tr>
<tr>
<td>T1 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T2 R1 Col 1</td>
<td>This row should NOT be red</td>
</tr>
<tr>
<td>T2 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
Use another pseudo selector for the table:
table:nth-of-type(1) tbody tr:first-child {
color: red;
}
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T1 R1 Col 1</td>
<td>This row should all be red</td>
</tr>
<tr>
<td>T1 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T2 R1 Col 1</td>
<td>This row should NOT be red</td>
</tr>
<tr>
<td>T2 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
You could take it a step further with the pseudo selectors since you already know you're targeting the first table and use :first-of-type which works similarly as :nth-of-type(1)
table:first-of-type tbody tr:first-child {
color: red;
}
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T1 R1 Col 1</td>
<td>This row should all be red</td>
</tr>
<tr>
<td>T1 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T2 R1 Col 1</td>
<td>This row should NOT be red</td>
</tr>
<tr>
<td>T2 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
Wrap the tables in a container element and then apply this CSS
.container > :first-child tr:first-child td:last-child {
color: red;
}
<div class="container">
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T1 R1 Col 1</td>
<td>This row should all be red</td>
</tr>
<tr>
<td>T1 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T2 R1 Col 1</td>
<td>This row should NOT be red</td>
</tr>
<tr>
<td>T2 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
</div>
Note: This will apply the CSS to the first table in every .container element. Just specify an ID instead and it shouldn't be a problem
I have a table with 9 columns, and under column 8, I want to print that column's total (which I have stored in a variable). How do I align the text so that it appears under column 8?
I currently have the total in a h5 tag, but if that prevents the alignment, I'm willing to change it.
<table> ...stuff
</table>
<h5>TOTAL!</h5> <---- this should appear under column 8 of the table
The best route would be to have it in the table itself however if that isn't an option, align your h5 by using javascript. Get the x offset of column 8 and apply that value to your h5. If you can provide a more full example of your markup I can provide an example.
Edit:
Since you didn't provide markup I created an example. You should be able to apply the gist of it to your code.
html
<table>
<thead>
<tr>
<td>head 1</td>
<td>head 2</td>
<td id="totalcol">head 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
</tr>
</tbody>
</table>
<p id="total">Some total</p>
js
var left = $('#totalcol').offset().left;
$("#total").css("margin-left",left);
http://jsfiddle.net/H62wV/
Assuming all columns are of equal width:
.p9 { /* p9 for 9 column table of equal width */
width: 11%;
}
h5 {
margin-left: 88%; /* 11 x 8 */
}
<table>
<tr>
<td class="p9">
...
</td>
</tr>
</table>
<h5>TOTAL!</h5>
Is your table an actual HTML table or CSS divs behaving like a table?
I believe that if you are going the table way, you should take it till the end.
To show a third column total, I would do:
<TABLE>
<THEAD>
<TR>
<td>head 1</td>
<td>head 2</td>
<td>head 3</td>
</tr>
</THEAD>
<TFOOT>
<TR>
<td></td> <<-- notice the empty cells
<td></td>
<td>TOTAL</td>
</tr>
</TFOOT>
<TBODY>
<TR>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
</tr>
</TBODY>
</TABLE>
This way the alignment is automatic.
(Notice that the footer recomended position is before the body)
For a sturdy guid I have to write an XHTML fragment that is a table of 3 rows. The first row has two elements 1 and 2. The second row has two elements 3 and 4. The final row has one element that spans both columns and contains the value 5. How would you do the last sentence(the final row)?
<table border="1">
<tr>
<td>1, 2</td>
</tr>
<tr>
<td>3,4</td>
</tr>
<tr>
<span><td>5</td></span>
</tr>
</table>
I think you wish to use the colspan attribute. Assuming that you want 1 and 2 in the first row to be in 2 different columns (Your code doesn't do this), what you need is something like this:
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan = "2">5</td>
</tr>
</table>
If you do not understand this, please ask me again in the comments.
<table border="1">
<tr>
<td>1, 2</td>
</tr>
<tr>
<td>3,4</td>
</tr>
<tr>
<td colspan="2">5</td>
</tr>
</table>
your code has only one column for 1,2 and 3,4 so your last row value cannot span to two columns. For that you have to modify it a bit
<tr>
<td>1 </td><td> 2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
<tr>
<td colspan="2">5</td>
</tr>