This was a challenging question. I think I finally have a solution that satisfies complete requirements: a vertical and horizontal scrollable dynamic table (dynamic because you can change the amount of rows and columns, and no cells have fixed width or height).
The HTML and CSS layout is quite simple as other people have mentioned. The key issue is recalculating (JavaScript) cell widths. And to make sure horizontal scrolling works, I also recalculate theader and tbody width.
Here's a fiddle https://jsfiddle.net/jmarcos00/6hv0dsj8/1/
HTML code:
<!--
thead and tbody have identifiers
table is inside a div container
-->
<div>
<table>
<thead id="mythead">
<tr>
<th>header one</th>
<th>two</th>
<th>header three</th>
<th>header one</th>
<th>two</th>
<th>header three</th>
</tr>
</thead>
<tbody id="mytbody">
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
</tbody>
</table>
</div>
CSS code:
/* table border rule */
table, td, th { border: 1px solid black; }
/* display as block plus display vertical scroll bars */
thead, tbody { display: block; overflow-y: scroll; }
/* sample height */
tbody { height: 100px; }
/* sample width and horizontal scroll bar */
div { width: 200px; overflow-x: auto; }
JavaScript code:
var i, w, wtot, thtot, thw, tdw, theadtr, tbodytr;
var th_rect, td_rect, theadtr_rect, tbodytr_rect;
var safe = new Array();
// get thead and tbody
var mythead = document.getElementById("mythead");
var mytbody = document.getElementById("mytbody");
// get first tr of thead and tbody
theadtr = mythead.children[0];
tbodytr = mytbody.children[0];
theadtr_rect = theadtr.getBoundingClientRect();
tbodytr_rect = tbodytr.getBoundingClientRect();
// get width difference of longer first tr
// difference between tr and parent
if (tbodytr_rect.width > theadtr_rect.width)
wtot = mytbody.getBoundingClientRect().width - tbodytr_rect.width;
else
wtot = mythead.getBoundingClientRect().width - theadtr_rect.width;
// get width difference between tr and total th width (first step)
thtot = theadtr_rect.width;
// get th thead array and td tbody array
theadtr = theadtr.children;
tbodytr = tbodytr.children;
// get loop
for (i = 0; i < theadtr.length; i++)
{
// second step for width difference between tr and total th width
th_rect = theadtr[i].getBoundingClientRect();
td_rect = tbodytr[i].getBoundingClientRect();
thtot -= th_rect.width;
// get width of each th and first row td (without paddings etc)
tdw = parseFloat(window.getComputedStyle(tbodytr[i]).getPropertyValue("width"));
thw = parseFloat(window.getComputedStyle(theadtr[i]).getPropertyValue("width"));
// get bigger width
w = (tdw > thw) ? tdw : thw;
safe.push(w);
// add to width total (decimal value with paddings etc)
w = (tdw > thw) ? td_rect.width : th_rect.width;
wtot += w;
}
// consider tr width and total th width difference
wtot += thtot;
// set loop
for (i = 0; i < theadtr.length; i++)
{
// set width to th and first row td
w = safe[i] + "px";
theadtr[i].style.width = w;
tbodytr[i].style.width = w;
}
// set width for thead and tbody
wtot = wtot + "px";
mythead.style.width = wtot;
mytbody.style.width = wtot;
