<table> with fixed <thead> and scrollable <tbody> [duplicate] - html

This question already has answers here:
Table fixed header and scrollable body
(30 answers)
Closed 2 years ago.
I've looked through questions here and articles all over the internet, but haven't found yet solution that would satisfy my requirements. So now in 2017, is there an elegant way to have a <table> that would:
be written in html+css (no js)
have fixed header (not scrollable; not sticky)
have scrollable <tbody> (scrollbar may be always visible)
header and body would handle resizing properly and not mess alignment of the <thead> columns and the <tbody> columns
would not use nested tables or separate table for header


Chrome, FF, Edge
the simplest solution is to use th { position: sticky; top: 0; }
/* JUST COMMON TABLE STYLES... */
table { border-collapse: collapse; width: 100%; }
th, td { background: #fff; padding: 8px 16px; }
.tableFixHead {
overflow: auto;
height: 100px;
}
.tableFixHead thead th {
position: sticky;
top: 0;
}
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
IE11
To sloppily support IE11 (2.5% market share as of 10/2018), a bit jaggy but at least THs are on top - you could add this JavaScript:
function isIE() {
return navigator.userAgent.indexOf('MSIE') > -1 || navigator.appVersion.indexOf('Trident/') > -1
}
if (isIE()) {
// Fix table head
function tableFixHead(ths) {
var sT = this.scrollTop;
[].forEach.call(ths, function(th) {
th.style.transform = "translateY(" + sT + "px)";
});
}
[].forEach.call(document.querySelectorAll(".tableFixHead"), function(el) {
var ths = el.querySelectorAll("thead th");
el.addEventListener("scroll", tableFixHead.bind(el, ths));
});
}
which will (since IE ignores sticky position) use transform translateY to position the TH elements.
PS: the above JS (without the wrapping if statement) works pretty decently for all other evergreen browsers too - in case position: sticky; does not fits your needs...


This solution fulfills all 5 requirements:
table {
width: 100%;
}
table, td {
border-collapse: collapse;
border: 1px solid #000;
}
thead {
display: table; /* to take the same width as tr */
width: calc(100% - 17px); /* - 17px because of the scrollbar width */
}
tbody {
display: block; /* to enable vertical scrolling */
max-height: 200px; /* e.g. */
overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}
th, td {
width: 33.33%; /* to enable "word-break: break-all" */
padding: 5px;
word-break: break-all; /* 4. */
}
tr {
display: table; /* display purpose; th's border */
width: 100%;
box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */
}
td {
text-align: center;
border-bottom: none;
border-left: none;
}
<table>
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1111111111111111111111111</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data2222222222222222222222222</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data3333333333333333333333333</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>


.table-sticky>thead>tr>th,
.table-sticky>thead>tr>td {
background: #009688;
color: #fff;
top: 0px;
position: sticky;
}
.table-height {
height: 320px;
display: block;
overflow: scroll;
width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td {
border: 1px solid #ddd;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Fixed Table Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<div id="container">
<div class="table-responsive table-height">
<table class="table table-bordered table-striped table-hover table-sticky">
<thead style="background:#1e91cf;color:#fff">
<tr>
<th class="text-center" rowspan="2"> Product</th>
<th class="text-center" colspan="2"> Sellable</th>
<th class="text-center" colspan="2"> Unsellable</th>
<th class="text-center" colspan="2"> Total</th>
<th class="text-center" colspan="6">2018-July</th>
<th class="text-center" colspan="6">2018-June</th>
<th class="text-center" colspan="6">2018-May</th>
<th class="text-center" colspan="6">2018-April</th>
</tr>
<tr>
<th class="text-center" style="top: 23px;"> Units</th>
<th class="text-center" style="top: 23px;"> Amount</th>
<th class="text-center" style="top: 23px;"> Units</th>
<th class="text-center" style="top: 23px;"> Amount</th>
<th class="text-center" style="top: 23px;"> Units</th>
<th class="text-center" style="top: 23px;"> Amount</th>
<th class="text-center" style="top: 23px;">SU</th>
<th class="text-center" style="top: 23px;">SA</th>
<th class="text-center" style="top: 23px;">UU</th>
<th class="text-center" style="top: 23px;">UA</th>
<th class="text-center" style="top: 23px;">TU</th>
<th class="text-center" style="top: 23px;">TA</th>
<th class="text-center" style="top: 23px;">SU</th>
<th class="text-center" style="top: 23px;">SA</th>
<th class="text-center" style="top: 23px;">UU</th>
<th class="text-center" style="top: 23px;">UA</th>
<th class="text-center" style="top: 23px;">TU</th>
<th class="text-center" style="top: 23px;">TA</th>
<th class="text-center" style="top: 23px;">SU</th>
<th class="text-center" style="top: 23px;">SA</th>
<th class="text-center" style="top: 23px;">UU</th>
<th class="text-center" style="top: 23px;">UA</th>
<th class="text-center" style="top: 23px;">TU</th>
<th class="text-center" style="top: 23px;">TA</th>
<th class="text-center" style="top: 23px;">SU</th>
<th class="text-center" style="top: 23px;">SA</th>
<th class="text-center" style="top: 23px;">UU</th>
<th class="text-center" style="top: 23px;">UA</th>
<th class="text-center" style="top: 23px;">TU</th>
<th class="text-center" style="top: 23px;">TA</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">INFOCUS-TURBO5-GG-16GB-D</td>
<td class="text-left">1244</td>
<td class="text-left">75,12,756</td>
<td class="text-left">173</td>
<td class="text-left">10,50,827</td>
<td class="text-left">1417</td>
<td class="text-left">85,63,583</td>
<td class="text-left">11</td>
<td class="text-left">65,989</td>
<td class="text-left">3</td>
<td class="text-left">18,497</td>
<td class="text-left">14</td>
<td class="text-left">84,486</td>
<td class="text-left">112</td>
<td class="text-left">6,71,888</td>
<td class="text-left">17</td>
<td class="text-left">1,01,983</td>
<td class="text-left">129</td>
<td class="text-left">7,73,871</td>
<td class="text-left">649</td>
<td class="text-left">38,93,351</td>
<td class="text-left">85</td>
<td class="text-left">5,10,415</td>
<td class="text-left">734</td>
<td class="text-left">44,03,766</td>
<td class="text-left">472</td>
<td class="text-left">28,81,528</td>
<td class="text-left">68</td>
<td class="text-left">4,19,932</td>
<td class="text-left">540</td>
<td class="text-left">33,01,460</td>
</tr>
<tr>
<td class="text-left">INFOCUS-TURBO5-GG-32GB-D</td>
<td class="text-left">2140</td>
<td class="text-left">1,50,25,360</td>
<td class="text-left">453</td>
<td class="text-left">31,98,547</td>
<td class="text-left">2593</td>
<td class="text-left">1,82,23,907</td>
<td class="text-left">222</td>
<td class="text-left">15,53,778</td>
<td class="text-left">41</td>
<td class="text-left">2,86,959</td>
<td class="text-left">263</td>
<td class="text-left">18,40,737</td>
<td class="text-left">558</td>
<td class="text-left">39,05,442</td>
<td class="text-left">113</td>
<td class="text-left">7,90,887</td>
<td class="text-left">671</td>
<td class="text-left">46,96,329</td>
<td class="text-left">798</td>
<td class="text-left">55,85,202</td>
<td class="text-left">168</td>
<td class="text-left">11,78,332</td>
<td class="text-left">966</td>
<td class="text-left">67,63,534</td>
<td class="text-left">562</td>
<td class="text-left">39,80,938</td>
<td class="text-left">131</td>
<td class="text-left">9,42,369</td>
<td class="text-left">693</td>
<td class="text-left">49,23,307</td>
</tr>
<tr>
<td class="text-left">INFOCUS-TURBO5-MG-16GB-DAR</td>
<td class="text-left">371</td>
<td class="text-left">22,25,629</td>
<td class="text-left">45</td>
<td class="text-left">2,69,955</td>
<td class="text-left">416</td>
<td class="text-left">24,95,584</td>
<td class="text-left">39</td>
<td class="text-left">2,33,961</td>
<td class="text-left">9</td>
<td class="text-left">53,991</td>
<td class="text-left">48</td>
<td class="text-left">2,87,952</td>
<td class="text-left">294</td>
<td class="text-left">17,63,706</td>
<td class="text-left">32</td>
<td class="text-left">1,91,968</td>
<td class="text-left">326</td>
<td class="text-left">19,55,674</td>
<td class="text-left">38</td>
<td class="text-left">2,27,962</td>
<td class="text-left">4</td>
<td class="text-left">23,996</td>
<td class="text-left">42</td>
<td class="text-left">2,51,958</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
</tr>
<tr>
<td class="text-left">INFOCUS-TURBO5-MG-32GB-D</td>
<td class="text-left">6</td>
<td class="text-left">44,994</td>
<td class="text-left">3</td>
<td class="text-left">22,497</td>
<td class="text-left">9</td>
<td class="text-left">67,491</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">0</td>
<td class="text-left">0</td>
<td class="text-left">1</td>
<td class="text-left">7,499</td>
<td class="text-left">1</td>
<td class="text-left">7,499</td>
<td class="text-left">3</td>
<td class="text-left">22,497</td>
<td class="text-left">1</td>
<td class="text-left">7,499</td>
<td class="text-left">4</td>
<td class="text-left">29,996</td>
<td class="text-left">3</td>
<td class="text-left">22,497</td>
<td class="text-left">1</td>
<td class="text-left">7,499</td>
<td class="text-left">4</td>
<td class="text-left">29,996</td>
</tr>
<tr>
<td class="text-left">INFOCUS-TURBO5-RG-32GB-D</td>
<td class="text-left">1459</td>
<td class="text-left">1,09,84,041</td>
<td class="text-left">335</td>
<td class="text-left">25,23,665</td>
<td class="text-left">1794</td>
<td class="text-left">1,35,07,706</td>
<td class="text-left">141</td>
<td class="text-left">10,57,359</td>
<td class="text-left">40</td>
<td class="text-left">2,99,960</td>
<td class="text-left">181</td>
<td class="text-left">13,57,319</td>
<td class="text-left">558</td>
<td class="text-left">41,84,442</td>
<td class="text-left">116</td>
<td class="text-left">8,69,884</td>
<td class="text-left">674</td>
<td class="text-left">50,54,326</td>
<td class="text-left">369</td>
<td class="text-left">27,67,131</td>
<td class="text-left">101</td>
<td class="text-left">7,57,399</td>
<td class="text-left">470</td>
<td class="text-left">35,24,530</td>
<td class="text-left">391</td>
<td class="text-left">29,75,109</td>
<td class="text-left">78</td>
<td class="text-left">5,96,422</td>
<td class="text-left">469</td>
<td class="text-left">35,71,531</td>
</tr>
<tr>
<td class="text-left">INFOCUS-TURBO5PLUS-MB-32GB-D</td>
<td class="text-left">5</td>
<td class="text-left">39,995</td>
<td class="text-left">4</td>
<td class="text-left">31,996</td>
<td class="text-left">9</td>
<td class="text-left">71,991</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">5</td>
<td class="text-left">39,995</td>
<td class="text-left">4</td>
<td class="text-left">31,996</td>
<td class="text-left">9</td>
<td class="text-left">71,991</td>
</tr>
<tr>
<td class="text-left">INFOCUS-VISION3-16GB-D</td>
<td class="text-left">4005</td>
<td class="text-left">2,80,30,995</td>
<td class="text-left">618</td>
<td class="text-left">43,25,382</td>
<td class="text-left">4623</td>
<td class="text-left">3,23,56,377</td>
<td class="text-left">28</td>
<td class="text-left">1,95,972</td>
<td class="text-left">8</td>
<td class="text-left">55,992</td>
<td class="text-left">36</td>
<td class="text-left">2,51,964</td>
<td class="text-left">234</td>
<td class="text-left">16,37,766</td>
<td class="text-left">44</td>
<td class="text-left">3,07,956</td>
<td class="text-left">278</td>
<td class="text-left">19,45,722</td>
<td class="text-left">1727</td>
<td class="text-left">1,20,87,273</td>
<td class="text-left">241</td>
<td class="text-left">16,86,759</td>
<td class="text-left">1968</td>
<td class="text-left">1,37,74,032</td>
<td class="text-left">2016</td>
<td class="text-left">1,41,09,984</td>
<td class="text-left">325</td>
<td class="text-left">22,74,675</td>
<td class="text-left">2341</td>
<td class="text-left">1,63,84,659</td>
</tr>
<tr>
<td class="text-left">INFOCUS-VISION3-BL-16GB-D</td>
<td class="text-left">9344</td>
<td class="text-left">6,53,98,656</td>
<td class="text-left">1161</td>
<td class="text-left">81,25,839</td>
<td class="text-left">10505</td>
<td class="text-left">7,35,24,495</td>
<td class="text-left">301</td>
<td class="text-left">21,06,699</td>
<td class="text-left">60</td>
<td class="text-left">4,19,940</td>
<td class="text-left">361</td>
<td class="text-left">25,26,639</td>
<td class="text-left">2339</td>
<td class="text-left">1,63,70,661</td>
<td class="text-left">304</td>
<td class="text-left">21,27,696</td>
<td class="text-left">2643</td>
<td class="text-left">1,84,98,357</td>
<td class="text-left">3745</td>
<td class="text-left">2,62,11,255</td>
<td class="text-left">440</td>
<td class="text-left">30,79,560</td>
<td class="text-left">4185</td>
<td class="text-left">2,92,90,815</td>
<td class="text-left">2959</td>
<td class="text-left">2,07,10,041</td>
<td class="text-left">357</td>
<td class="text-left">24,98,643</td>
<td class="text-left">3316</td>
<td class="text-left">2,32,08,684</td>
</tr>
<tr>
<td class="text-left">INFOCUS-VISION3PRO-MNB-</td>
<td class="text-left">620</td>
<td class="text-left">68,19,380</td>
<td class="text-left">104</td>
<td class="text-left">11,43,896</td>
<td class="text-left">724</td>
<td class="text-left">79,63,276</td>
<td class="text-left">47</td>
<td class="text-left">5,16,953</td>
<td class="text-left">13</td>
<td class="text-left">1,42,987</td>
<td class="text-left">60</td>
<td class="text-left">6,59,940</td>
<td class="text-left">198</td>
<td class="text-left">21,77,802</td>
<td class="text-left">46</td>
<td class="text-left">5,05,954</td>
<td class="text-left">244</td>
<td class="text-left">26,83,756</td>
<td class="text-left">344</td>
<td class="text-left">37,83,656</td>
<td class="text-left">45</td>
<td class="text-left">4,94,955</td>
<td class="text-left">389</td>
<td class="text-left">42,78,611</td>
<td class="text-left">31</td>
<td class="text-left">3,40,969</td>
<td class="text-left">0</td>
<td class="text-left">0</td>
<td class="text-left">31</td>
<td class="text-left">3,40,969</td>
</tr>
<tr>
<td class="text-left">MOTO-G5-FG-16GB</td>
<td class="text-left">52</td>
<td class="text-left">4,27,812</td>
<td class="text-left">28</td>
<td class="text-left">2,36,063</td>
<td class="text-left">80</td>
<td class="text-left">6,63,875</td>
<td class="text-left">0</td>
<td class="text-left">0</td>
<td class="text-left">1</td>
<td class="text-left">8,985</td>
<td class="text-left">1</td>
<td class="text-left">8,985</td>
<td class="text-left">0</td>
<td class="text-left">0</td>
<td class="text-left">1</td>
<td class="text-left">8,229</td>
<td class="text-left">1</td>
<td class="text-left">8,229</td>
<td class="text-left">14</td>
<td class="text-left">1,15,465</td>
<td class="text-left">8</td>
<td class="text-left">68,675</td>
<td class="text-left">22</td>
<td class="text-left">1,84,140</td>
<td class="text-left">38</td>
<td class="text-left">3,12,347</td>
<td class="text-left">18</td>
<td class="text-left">1,50,174</td>
<td class="text-left">56</td>
<td class="text-left">4,62,521</td>
</tr>
<tr>
<td class="text-left">MOTO-GPLUS4-BL-16GB</td>
<td class="text-left">0</td>
<td class="text-left">0</td>
<td class="text-left">1</td>
<td class="text-left">10,499</td>
<td class="text-left">1</td>
<td class="text-left">10,499</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">0</td>
<td class="text-left">0</td>
<td class="text-left">1</td>
<td class="text-left">10,499</td>
<td class="text-left">1</td>
<td class="text-left">10,499</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
<td class="text-left">Data Not Available</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>


How about this?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
table {
max-width:980px;
table-layout:fixed;
margin:auto;
}
th, td {
padding:5px 10px;
border:1px solid #000;
}
thead, tfoot {
background:#f9f9f9;
display:table;
width:100%;
width:calc(100% - 18px);
}
tbody {
height:300px;
overflow:auto;
overflow-x:hidden;
display:block;
width:100%;
}
tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Header 1 </th>
<th scope="col">Header 2 </th>
<th scope="col">Header 3 </th>
<th scope="col">Header 4 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
<tr>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
<td>Cell content </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1 </td>
<td>Footer 2 </td>
<td>Footer 3 </td>
<td>Footer 4 </td>
</tr>
</tfoot>
</table>
</body>
</html>
I've created a fiddle below
https://jsfiddle.net/jchaplin2/dt829611/1/


Short Answer: No, not possible.
VXp's answer is interesting but doesn't work as you might expect. It has 2 issues:
The table width must be set to specific fixed width, you cannot have dynamic width with this solution. That's why he set the width to 600px of the table.
If any cell has long text, the whole layout will break (improperly aligned columns).
Same thing for Jon's answer.
I discourage using fixed table head, but if you really want to do this with the set of rules you enumerated (the 5 rules you mentioned), the only solution is using js/jQuery.

Related

Is it possible to make table with different columns for different rows?

I am using bootstrap4 and I want to make a table where first row have 3 columns, another two rows with 4 columns. i.e. to look like this
My current table
<link href="https://cdn.usebootstrap.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered table-bordered">
<tbody>
<tr>
<td width="25%">1П</td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
<tr>
<td width="25%">2П</td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
<tr>
<td width="25%">Прод.</td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
</tbody>
</table>

Your code renders an incomplete table, so some browsers might try to make it complete producing an unexpected result. But you can simply add another cell in the first row, leave it empty and make its border invisible:
table {
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
}
tr:first-of-type>td:last-child {
border: none;
}
<table class="table table-bordered table-bordered">
<tbody>
<tr>
<td width="25%">1П</td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
<tr>
<td width="25%">2П</td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
<tr>
<td width="25%">Прод.</td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
</tbody>
</table>

Bootstrap comes with built-in class.
remove the border class table-bordered on table, then add borderclass to tds
<link href="https://cdn.usebootstrap.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table m-5 w-50"><!-- demo purpose , use of w-50 and m-5 classes is optional-->
<tbody>
<tr>
<td width="25%" class="border">1П</td>
<td width="25%" class="border"></td>
<td width="25%" class="border"></td>
</tr>
<tr>
<td width="25%" class="border">2П</td>
<td width="25%" class="border"></td>
<td width="25%" class="border"></td>
<td width="25%" class="border"></td>
</tr>
<tr>
<td width="25%" class="border">Прод.</td>
<td width="25%" class="border"></td>
<td width="25%" class="border"></td>
<td width="25%" class="border"></td>
</tr>
</tbody>
</table>

How can we create 3/2 span? The span is meant to divide the column space into 2 rows in front of 3 rows (corresponding to the previous column)

I am trying to divide the space covering the XPath and XSL Transformations (as shown in the picture) into two rows whereas the previous columns are divided into three rows. I have used CSS but can not achieve what is desired in this example.
Row and Column spanning in HTML table
Here's what I wrote for everything except the 3/2 spanning
<table border=1>
<tr>
<th rowspan=3>Day</th>
<th colspan=3>Seminar</th>
</tr>
<tr>
<th colspan=2>Schedule</th>
<th rowspan=2>Topic</th>
</tr>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
<tr>
<td rowspan=2>Monday</td>
<td style="background-color: #F8F6D1;" rowspan=2>8:00 a.m.</td>
<td style="background-color:#BFB4F8;" rowspan=2>5:00 p.m.</td>
<td>Introduction to XML</td>
</tr>
<tr>
<td>Validity: DTD and Relax NG</td>
</tr>
<tr>
<td rowspan=3>Tuesday</td>
<td style="background-color: #F8F6D1;">8:00 a.m.</td>
<td style="background-color: #F8F6D1;">11:00 a.m.</td>
<td rowspan=2>XPath</td>
</tr>
<tr>
<td style="background-color: #F8F6D1;">11:00 a.m.</td>
<td style="background-color: #C7F8D8;">2:00 p.m.</td>
</tr>
<tr>
<td style="background-color: #C7F8D8;">2:00 p.m.</td>
<td style="background-color:#BFB4F8;">5:00 p.m.</td>
<td rowspan=1>XSL Transformations</td>
</tr>
<tr>
<td>Wednesday</td>
<td style="background-color: #F8F6D1;">8:00 a.m.</td>
<td style="background-color: #C7F8D8;">12:00 p.m.</td>
<td>XSL Formatting Objects</td>
</tr>
</table>

I'm able to achieve what was required through some CSS (absolute positioning, margin and padding) but still can't figure out how to do this using only the concepts of HTML. Btw this was a class assignment and our instructor told us that it can be achieved using nested tables. I am still not able to figure it out but thanks to those who helped
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<table border=1>
<tr>
<th rowspan=3>Day</th>
<th colspan=3>Seminar</th>
</tr>
<tr>
<th colspan=2>Schedule</th>
<th rowspan=2>Topic</th>
</tr>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
<tr>
<td rowspan=2>Monday</td>
<td style="background-color: #F8F6D1;" rowspan=2>8:00 a.m.</td>
<td style="background-color:#BFB4F8;" rowspan=2>5:00 p.m.</td>
<td>Introduction to XML</td>
</tr>
<tr>
<td>Validity: DTD and Relax NG</td>
</tr>
<tr>
<td rowspan=6>Tuesday</td>
<td style="background-color: #F8F6D1;" rowspan=2>8:00 a.m.</td>
<td style="background-color: #F8F6D1;" rowspan=2>11:00 a.m.</td>
<td rowspan=3 style="position: absolute;padding-top:7px;padding-bottom: 7px;padding-right:148px;">XPath</td>
</tr>
<tr></tr>
<tr>
<td style="background-color: #F8F6D1;" rowspan=2>11:00 a.m.</td>
<td style="background-color: #C7F8D8;" rowspan=2>2:00 p.m.</td>
</tr>
<tr>
<td rowspan=3 style="position: absolute;padding-top: 7px;padding-bottom: 7px;padding-right:50px;margin-top: 10px;">XSL Transformations</td>
</tr>
<tr>
<td style="background-color: #C7F8D8;" rowspan=2>2:00 p.m.</td>
<td style="background-color:#BFB4F8;" rowspan=2>5:00 p.m.</td>
</tr>
<tr></tr>
<tr>
<td>Wednesday</td>
<td style="background-color: #F8F6D1;">8:00 a.m.</td>
<td style="background-color: #C7F8D8;">12:00 p.m.</td>
<td>XSL Formatting Objects</td>
</tr>
</table>
</body>
</html>

Your 'Tuesday' block gonna be like this:
<tr>
<td rowspan='4'>Tuesday</td>
<td style="background-color: #F8F6D1;">8:00 a.m.</td>
<td style="background-color: #F8F6D1;">11:00 a.m.</td>
<td rowspan='2'>XPath</td>
</tr>
<tr>
<td style="background-color: #F8F6D1;" rowspan="2">11:00 a.m.</td>
<td style="background-color: #C7F8D8;" rowspan="2">2:00 p.m.</td>
</tr>
<tr>
<td rowspan='2'>XSL Transformations</td>
</tr>
<tr>
<td style="background-color: #C7F8D8;">2:00 p.m.</td>
<td style="background-color:#BFB4F8;">5:00 p.m.</td>
</tr>
Based on this: https://stackoverflow.com/a/37797024/10291167

It could be done by nested table...
<table border width='300' height='200'>
<tr>
<td width='150'>Data 1</td>
<td rowspan="3">
<table width="150" height='100%'>
<tr>
<td>Nested 1</td>
</tr>
<tr>
<td>Nested 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
</tr>
</table>

In the end I found this solution. But it turned out to be a weird table.
The "rhythm" of two-to-three can only be realised by internally working with 6 rows. This is what I did below. The cell
<td rowspan=3>XPath<br> <br> </td>
was made to look a little taller by adding a few <br>s.
<table border=1>
<tr>
<th rowspan=3>Day</th>
<th colspan=3>Seminar</th>
</tr>
<tr>
<th colspan=2>Schedule</th>
<th rowspan=2>Topic</th>
</tr>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
<tr>
<td rowspan=2>Monday</td>
<td style="background-color: #F8F6D1;" rowspan=2>8:00 a.m.</td>
<td style="background-color:#BFB4F8;" rowspan=2>5:00 p.m.</td>
<td>Introduction to XML</td>
</tr>
<tr>
<td>Validity: DTD and Relax NG</td>
</tr>
<tr>
<td rowspan=6>Tuesday</td>
<td rowspan=2 style="background-color: #F8F6D1;">8:00 a.m.</td>
<td rowspan=2 style="background-color: #F8F6D1;">11:00 a.m.</td>
<td rowspan=3>XPath<br> <br> </td>
</tr>
<tr>
</tr>
<tr>
<td rowspan=2 style="background-color: #F8F6D1;">11:00 a.m.</td>
<td rowspan=2 style="background-color: #C7F8D8;">2:00 p.m.</td>
</tr>
<tr>
<td rowspan=3>XSL Transformations</td></tr>
<tr>
<td rowspan=2 style="background-color: #C7F8D8;">2:00 p.m.</td>
<td rowspan=2 style="background-color:#BFB4F8;">5:00 p.m.</td>
</tr>
<tr>
</tr>
<tr>
<td>Wednesday</td>
<td style="background-color: #F8F6D1;">8:00 a.m.</td>
<td style="background-color: #C7F8D8;">12:00 p.m.</td>
<td>XSL Formatting Objects</td>
</tr>
</table>

How to set the entire row height twice as the others in html table

I have two tables. One with additional invisible <td> and one without. The problem is that the second table's rowspan is not working, the entire row just collapses. How could I get the result like in the first table without adding that unnecessary <td>?
HTML:
.table-height td {
height: 30px;
}
.invisible {
width: 1px;
}
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
<td className='invisible'></td>
</tr>
<tr>
<td className='invisible'></td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td className='invisible'></td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td className='invisible'></td>
</tr>
</tbody>
</table>
</p>
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
</p>

Finally I got it right. I just need to set the height for <tr> too (same as for </td>)
.table-height td, tr {
height: 30px;
}
.invisible {
width: 1px;
}
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
</p>

Need table design with rowspan and colspan

I am working on a pay slip design which should be implemented using table structure. I tried a lot but I am still very confused about rowspan and colspan. I also attached the html code below and I need to achieve the entire design in the attached png
<table id="woSpTable" align="center" class="table table-bordered table-responsive table-striped fontsize">
<thead>
<tr>
<th colspan="2"> Employee Details</th>
<th colspan="2">Payment & Leave Details</th>
<th colspan="2">Location Details</th>
<!--<th>ABC</th>-->
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">Item1</td>
<td colspan="2">Item1</td>
<td colspan="2">Item1</td>
<td colspan="4">Item1</td>
</tr>
<tr>
<td>Name1</td>
<td>Price1</td>
</tr>
<tr>
<td>Name2</td>
<td>Price2</td>
</tr>
<tr>
<td>Name3</td>
<td>Price3</td>
</tr>
<tr>
<td>Item2</td>
<td>Item2</td>
<td colspan="2">Item2</td>
<td>Item2</td>
</tr>
</tbody>
</table>

table {
font: 12px 'Arial';
margin: 10px auto;
background: #fff;
text-align: left;
border: 1px solid #000;
border-collapse: collapse;
}
table * { border: 1px solid #000; padding: 5px; white-space: nowrap; }
caption {
background: #fff;
text-transform: uppercase;
text-align: left;
font-weight: bold;
}
tr { background: #fafafb; }
th { color: #fff; background: #0080bf; }
.field { font-weight: bold; }
<table id="woSpTable" align="center" class="table table-bordered table-responsive table-striped fontsize">
<caption>MS. KUSUM KISHORI</caption>
<thead>
<tr>
<th colspan="4">Employee Details</th>
<th colspan="7">Payment & Leave Details</th>
<th colspan="2">Location Details</th>
</tr>
</thead>
<tbody>
<tr>
<td class="field">Emp No.</td>
<td colspan="3">929753</td>
<td class="field">Bank Name</td>
<td colspan="6">AXIS Bank</td>
<td class="field">Location</td>
<td>Item1</td>
</tr>
<tr>
<td class="field">Grade</td>
<td>C1</td>
<td class="field">UAN</td>
<td>10110101013999</td>
<td class="field">Acc No.</td>
<td colspan="6">10110101013999</td>
<td class="field">Base Br.</td>
<td>TSC - Hyderabad</td>
</tr>
<tr>
<td class="field">PAN</td>
<td colspan="3">DROPK7729E</td>
<td class="field">Days paid</td>
<td colspan="6">31</td>
<td class="field">Depute Br.</td>
<td>TSC - Hyderabad</td>
</tr>
<tr>
<td colspan="4"></td>
<td class="field">Leave Balance</td>
<td class="field">EL</td>
<td>36.32</td>
<td class="field">SL</td>
<td>24.32</td>
<td class="field">CL</td>
<td>2.50</td>
<td class="field">WON/SWON</td>
<td>2874529</td>
</tr>
</tbody>
</table>
<table id="woSpTable2" class="table table-bordered table-responsive table-striped fontsize">
<thead>
<tr>
<th>Earnings</th>
<th>Arrears</th>
<th>Current</th>
<th>Deductions</th>
<th>Amount</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Total Earnings (Current + Arrears)</td>
<td>34,710.00</td>
<td>Total Deductions</td>
<td>2,817.00</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Op</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Op</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

can i add a scroll to striped table (boostrap) in html?

I need to use a striped table (boostrap) but with a scroll. In my code, i just call the class table-striped and the tables looks fine. Now i need to add a scroll to that same table keeping the same style. Is that posible? how?
Here is some of my code
<div class="row col-sm-12">
<div class="col-sm-7">
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escor</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2001</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I don't know where to find the css code. I used a boostrap template.

Set a height and overflow-y: scroll in your style
table {
height: 30px;
overflow-y: scroll;
}
when data loading and the space are not enough for data, table will show a scroll.
<table style="border: 1px solid red">
<thead>
<tr>
<td>Header stays put, no scrolling</td>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
<tr>
<td>cell 1/1</td>
<td>cell 1/2</td>
</tr>
<tr>
<td>cell 2/1</td>
<td>cell 2/2</td>
</tr>
<tr>
<td>cell 3/1</td>
<td>cell 3/2</td>
</tr>
</tbody>
</table>