How can I make a table which has sub/nested tables scrollable if given a max height? I do not want the thead to scroll with it. What I'm really looking for is some valid tag that I can wrap my s in, or some other markup that will work just as well as the this:
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<!-- Insert valid tag here to wrap <tbody>s -->
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<!-- Insert valid close tag here -->
</table>
If I understand your question correctly, maybe try something like this: http://jsfiddle.net/pPuXL/1/
You need to display the TBODY elements as "block" or "inline-block" in order for overflow to work on it, as in the CSS example I posted.
Related
I am trying to increase the size of my side-to-side tables to fit the whole page but it does not work I added the style="width: 50%" to each table but it shows the first table in a row and the second table in other row and I want them to be horizontally sided and fitting the whole page
<table style="float: left">
<thead>
<tr>
<th>A</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
</tr>
</tbody>
</table>
<table style="float: left">
<thead>
<tr>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
</tr>
</tbody>
</table>
You can achieve this by adding the display: flex; in the parent element.
<div style="display: flex;">
<table style="width:100%;">
<thead>
<tr>
<th>A</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
</tr>
</tbody>
</table>
<table style="width:100%;">
<thead>
<tr>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
</tr>
</tbody>
</table>
</div>
To put both tables in the cells of the other table.
Or
To combinate style width - maybe 45% + 45 % etc.
Or
Set table width in pixels but not in percents. In that way your site will not be adaptive for all devices and monitors.
There are multiple ways to accomplish this. In my opinion, the best two ways are the following:
<div style="display: flex">
<table style="flex-grow: 1">
<thead>
<tr>
<th>A</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
</tr>
</tbody>
</table>
<table style="flex-grow: 1">
<thead>
<tr>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
</tr>
</tbody>
</table>
</div>
Or:
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
<table>
<thead>
<tr>
<th>A</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
</tr>
</tbody>
</table>
</div>
With either of these examples, if you would like to add some spacing between these two tables, you can use the CSS gap property on the div like so: gap: 1 rem
I have the following HTML table.
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
London, Paris and Rome have a class named show-on-top. As the name suggests I want to move all tr with show-on-top on top of the table. I can do that with the following code.
$("#table tbody").prepend($('.show-on-top'));
But the problem is that London, Paris and Rome are shown before <th> (the "City" heading). Of course I want to place show-on-top rows on top of the table but after heading (first row). So I came up with the following idea.
$("#table tbody tr:eq(1)").prepend($('.show-on-top'));
I'm almost there. All my show-on-top are placed after heading but they're nested inside a tr like follows.
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
</tbody>
I can't understand how the heck all my rows are nested inside a tr. I'm tried with hundreds of combinations of parent, after, prepend, append with no success.
Bonus question. show-on-top rows have data-order attribute that represents the order I want to sort th rows in question (Paris > Rome > London). I used sort.data('order') but nothing happens. I can't even see anything in console.log().
Thank you for your time.
One thing you can do is move the heading rows out of <tbody> into <thead>
$("#table tbody").prepend($('.show-on-top'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
</table>
Another solution is to use .after() to put the rows after the last row containing th.
$("#table tbody tr:has(th):last").after($(".show-on-top"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
</table>
You could use insertAfter() and :first selector
$(".show-on-top").insertAfter('#table tbody tr:first');
.show-on-top{ color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
</table>
I have a html structure like this, and the purpose is to have a CSS overflow: scroll when the media query is for a mobile device (Data is not long enough but it works):
<TABLE BORDER=0>
<TR>
<TD>
<table>
<thead>
<tr>
<th>x</th>
<th>x</th>
<th>x</th>
</tr>
</thead>
<tbody>
<tr>
<td>xyyy</td>
<td>xyyy</td>
<td>xyyy</td>
</tr>
</tbody>
</table>
</TD>
<TD>
<table>
<thead>
<tr>
<th>x</th>
<th>x</th>
<th>x</th>
</tr>
</thead>
<tbody>
<tr>
<td>xyyy</td>
<td>xyyy</td>
<td>xyyy</td>
</tr>
</tbody>
</table>
</TD>
</TR>
</TABLE>
When I try to resize on a small screen, the second table is simply just being cut off. I tried to set the overall width of the table to 100% and removed the max-width, but it does not work.
What am I doing wrong?
What should the table display?
Lets say we got a table like this:
<table>
<tbody>
<tr>
<th>1</th>
<th>A</th>
</tr>
</tbody>
<tbody>
<tr>
<th>2</th>
<th>B</th>
</tr>
</tbody>
</table>
What would be the best way to make a wrapper around the <tbody> elements?
I would need to make a table with a fixed header/footer and a scrollable content. I'm already using the <tbody> tags to connect specific rows and i could not find a proper way to wrap my whole table content.
Thank you in advance!
You need to come up with a proper structure like below. tbody IS the wrapper you need.
<table>
<thead>
<tr>
<th>1</th>
<th>A</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>B</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Footer!</td>
</tr>
</tfoot>
</table>
If you need x2 tbody elements consider using x2 table elements instead - which you can nest within td elements, as the code snippet demonstrates below:
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th>1</th>
<th>A</th>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<th>2</th>
<th>B</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
You can use multiple <tbody> elements in a table. It's valid.
tbody:nth-child(3) {
background:yellow;
}
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</tbody>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</tbody>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</tbody>
</table>
You can see the same example in w3 website.
I have created a table which loops from a database. Now I need to display this multiple table in a single row. Currently the loop display tables in columns. Please can someone suggest how to write the markup, so that it generates and displays table data in a single row?
For example, if there are 10 tables loops from the database, then there should be 10 cells in a single table row. The table should not contain anything below that row. It's ok for a horizontal scrollbar to display in the event that the table is longer than the screen width.
<table width="100%" class="table table-bordered table-striped">
<table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table>
Table inside table is not valid. You have to add table row then add all the tables under each table columns like below.
<table width="100%" class="table table-bordered table-striped">
<tr>
<td>
<table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table>
</td>
<td>
Your Second Table Goes here..
</td>
<td>
Your Third Table Goes here and so on.
</td>
</tr>
</table>
If I understand you right, you want the table shown above to be repeated multiple times such and to appear side by side in a single row.
What I would do is add the CSS property display: inline-table (use a class) to the relevant tables.
See the following example:
.tablePanel {
width: 300%;
word-break: nowrap;
border: 1px dotted blue;
}
.tablePanel table {
border: 1px dashed gray;
display: inline-table;
width: 200px;
}
<div class="tablePanel">
<table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table> <table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table> <table>
<thead>
<tr>
<th colspan="2">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">James</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
</tr>
</tbody>
</table>
</div>