CSS Transitions in Safari - javascript

I have an HTML table with collapsible/expandable sections. The CSS transition animates smoothly in every single browser except Safari. The collapse animation is super jerky on Safari, but the expand animation is okay. I'm running the latest: Safari 16.2 on macOS 13.1.
Any advice on how to resolve this would be fantastic. Thanks.
function toggleSpecCat(el, cls) {
el.closest('tr').classList.toggle('Closed');
document.querySelector(`.${cls}`).classList.toggle('Closed');
}
* {
font-family: sans-serif;
padding: 0;
margin: 0;
}
#Products {
margin: 0 auto;
border-spacing: 0;
}
#Products th,
#Products td {
border-right: 1px solid black;
border-bottom: 1px solid black;
background-color: white;
width: calc((100% - 180px) / 3);
min-width: 200px;
padding: 9px;
}
#Products th:first-child,
#Products td:first-child {
width: 180px;
}
#Products th {
background-color: #555;
color: white;
}
#Products th:first-child {
text-align: left;
}
#Products th:last-child,
#Products td:last-child {
border-right: none;
}
#Products .SpecCatHeader * {
background-color: black;
font-weight: bold;
color: white;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
#Products .SpecCat th,
#Products .SpecCat td {
transition: line-height 0.3s,
padding-top 0.3s,
padding-bottom 0.3s;
}
#Products .SpecCat.Closed th,
#Products .SpecCat.Closed td {
opacity: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
border: none;
}
<table id="Products">
<thead>
<tr>
<th>PRODUCTS</th>
<th>Product 1</th>
<th>Product 2</th>
<th>Product 3</th>
</tr>
</thead>
<tr class="SpecCatHeader">
<td colspan="4" onclick="toggleSpecCat(this, 'CatBattery')">
<span>Battery</span>
</td>
</tr>
<tbody class="SpecCat CatBattery">
<tr>
<th>Charging Cable Length</th>
<td>7.87" / 19.99 cm</td>
<td>7.87" / 19.99 cm</td>
<td>7.87" / 19.99 cm</td>
</tr>
<tr>
<th>Charging Port</th>
<td>USB Type-C</td>
<td>USB Type-C</td>
<td>USB Type-C</td>
</tr>
<tr>
<th>DC Input Power</th>
<td>5 VDC</td>
<td>5 VDC</td>
<td>5 VDC</td>
</tr>
<tr>
<th>Quick Charging Times</th>
<td>10 Minutes for 5 Hours</td>
<td>10 Minutes for 5 Hours</td>
<td>10 Minutes for 5 Hours</td>
</tr>
<tr>
<th>Recharge Time</th>
<td>3 Hours</td>
<td>3 Hours</td>
<td>3 Hours</td>
</tr>
<tr>
<th>Runtime</th>
<td>30 Hours (BT+ANC) 38 Hours (BT) 200 Hours (Standby)</td>
<td>30 Hours (BT+ANC) 38 Hours (BT) 200 Hours (Standby)</td>
<td>30 Hours (BT+ANC) 38 Hours (BT) 200 Hours (Standby)</td>
</tr>
<tr>
<th>Wireless Charging</th>
<td>None</td>
<td>None</td>
<td>None</td>
</tr>
</tbody>
<tr class="SpecCatHeader">
<td colspan="4" onclick="toggleSpecCat(this, 'CatHeadphone')">
<span>Headphone</span>
</td>
</tr>
<tbody class="SpecCat CatHeadphone">
<tr>
<th>Active Noise Cancellation</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th>Controls/Microphone Location</th>
<td>Controls: Earpiece (Side Unspecified) Microphone: Earpiece (Side Unspecified)</td>
<td>Controls: Earpiece (Side Unspecified) Microphone: Earpiece (Side Unspecified)</td>
<td>Controls: Earpiece (Side Unspecified) Microphone: Earpiece (Side Unspecified)</td>
</tr>
<tr>
<th>Diaphragm</th>
<td>Aluminum-Coated</td>
<td>Aluminum-Coated</td>
<td>Aluminum-Coated</td>
</tr>
<tr>
<th>Driver Size</th>
<td>1.57" / 40 mm</td>
<td>1.57" / 40 mm</td>
<td>1.57" / 40 mm</td>
</tr>
<tr>
<th>Driver Type</th>
<td>Dynamic</td>
<td>Dynamic</td>
<td>Dynamic</td>
</tr>
<tr>
<th>Earpiece Connection / Wearing Style</th>
<td>Headband</td>
<td>Headband</td>
<td>Headband</td>
</tr>
<tr>
<th>Earpiece Design</th>
<td>Over-Ear (Circumaural), Closed-Back</td>
<td>Over-Ear (Circumaural), Closed-Back</td>
<td>Over-Ear (Circumaural), Closed-Back</td>
</tr>
<tr>
<th>Earpiece Swivel</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th>Foldable</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th>Full Remote OS Support</th>
<td>Android, iOS</td>
<td>Android, iOS</td>
<td>Android, iOS</td>
</tr>
<tr>
<th>Magnet Type</th>
<td>Neodymium</td>
<td>Neodymium</td>
<td>Neodymium</td>
</tr>
<tr>
<th>Number of Drivers</th>
<td>1, per Earpiece</td>
<td>1, per Earpiece</td>
<td>1, per Earpiece</td>
</tr>
<tr>
<th>Sensors</th>
<td>Proximity, Touch</td>
<td>Proximity, Touch</td>
<td>Proximity, Touch</td>
</tr>
<tr>
<th>Voice Coil</th>
<td>Copper-Clad Aluminum Wire</td>
<td>Copper-Clad Aluminum Wire</td>
<td>Copper-Clad Aluminum Wire</td>
</tr>
</tbody>
<tr class="SpecCatHeader">
<td colspan="4" onclick="toggleSpecCat(this, 'CatMicrophone')">
<span>Microphone</span>
</td>
</tr>
<tbody class="SpecCat CatMicrophone">
<tr>
<th>Beamforming Support</th>
<td>No</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<th>Noise Canceling</th>
<td>Not Specified by Manufacturer</td>
<td>Not Specified by Manufacturer</td>
<td>Not Specified by Manufacturer</td>
</tr>
<tr>
<th>Number of Mics</th>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<th>Type</th>
<td>MEMS</td>
<td>MEMS</td>
<td>MEMS</td>
</tr>
</tbody>
<tr class="SpecCatHeader">
<td colspan="4" onclick="toggleSpecCat(this, 'CatPerformance')">
<span>Performance</span>
</td>
</tr>
<tbody class="SpecCat CatPerformance">
<tr>
<th>Frequency Response</th>
<td>4 Hz to 40 kHz (Wired)</td>
<td>4 Hz to 40 kHz (Wired)</td>
<td>4 Hz to 40 kHz (Wired)</td>
</tr>
<tr>
<th>Sensitivity</th>
<td>101 dB at 1 kHz (Passive) 105 dB at 1 kHz (Active)</td>
<td>101 dB at 1 kHz (Passive) 105 dB at 1 kHz (Active)</td>
<td>101 dB at 1 kHz (Passive) 105 dB at 1 kHz (Active)</td>
</tr>
<tr>
<th>Storage Capacity</th>
<td>None</td>
<td>None</td>
<td>None</td>
</tr>
</tbody>
</table>


I fixed it by removing line-height from my transition.
function toggleSpecCat(el, cls) {
el.closest('tr').classList.toggle('Closed');
document.querySelector(`.${cls}`).classList.toggle('Closed');
}
* {
font-family: sans-serif;
padding: 0;
margin: 0;
}
main {
width: 100%;
padding: 0;
}
#Products {
margin: 0 auto;
border-spacing: 0;
}
#Products th,
#Products td {
border-right: 1px solid black;
border-bottom: 1px solid black;
background-color: white;
width: calc((100% - 180px) / 3);
min-width: 200px;
padding: 9px;
}
#Products th:first-child {
width: 180px;
}
#Products th {
background-color: #555;
color: white;
}
#Products th:first-child {
text-align: left;
}
#Products th:last-child,
#Products td:last-child {
border-right: none;
}
#Products .SpecCatHeader * {
background-color: black;
font-weight: bold;
color: white;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
#Products .SpecCat th,
#Products .SpecCat td {
transition: padding-top 0.3s, padding-bottom 0.3s;
}
#Products .SpecCat.Closed th,
#Products .SpecCat.Closed td {
opacity: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
border: none;
}
<table id="Products">
<thead>
<tr>
<th>PRODUCTS</th>
<th>Product 1</th>
<th>Product 2</th>
<th>Product 3</th>
</tr>
</thead>
<tbody>
<tr class="SpecCatHeader">
<td colspan="4" onclick="toggleSpecCat(this, 'CatBattery')">
<span>Battery</span>
</td>
</tr>
</tbody>
<tbody class="SpecCat CatBattery">
<tr>
<th>Charging Cable Length</th>
<td>7.87" / 19.99 cm</td>
<td>7.87" / 19.99 cm</td>
<td>7.87" / 19.99 cm</td>
</tr>
<tr>
<th>Charging Port</th>
<td>USB Type-C</td>
<td>USB Type-C</td>
<td>USB Type-C</td>
</tr>
<tr>
<th>DC Input Power</th>
<td>5 VDC</td>
<td>5 VDC</td>
<td>5 VDC</td>
</tr>
<tr>
<th>Quick Charging Times</th>
<td>10 Minutes for 5 Hours</td>
<td>10 Minutes for 5 Hours</td>
<td>10 Minutes for 5 Hours</td>
</tr>
<tr>
<th>Recharge Time</th>
<td>3 Hours</td>
<td>3 Hours</td>
<td>3 Hours</td>
</tr>
<tr>
<th>Runtime</th>
<td>30 Hours (BT+ANC) 38 Hours (BT) 200 Hours (Standby)</td>
<td>30 Hours (BT+ANC) 38 Hours (BT) 200 Hours (Standby)</td>
<td>30 Hours (BT+ANC) 38 Hours (BT) 200 Hours (Standby)</td>
</tr>
<tr>
<th>Wireless Charging</th>
<td>None</td>
<td>None</td>
<td>None</td>
</tr>
</tbody>
<tbody>
<tr class="SpecCatHeader">
<td colspan="4" onclick="toggleSpecCat(this, 'CatHeadphone')">
<span>Headphone</span>
</td>
</tr>
</tbody>
<tbody class="SpecCat CatHeadphone">
<tr>
<th>Active Noise Cancellation</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th>Controls/Microphone Location</th>
<td>Controls: Earpiece (Side Unspecified) Microphone: Earpiece (Side Unspecified)</td>
<td>Controls: Earpiece (Side Unspecified) Microphone: Earpiece (Side Unspecified)</td>
<td>Controls: Earpiece (Side Unspecified) Microphone: Earpiece (Side Unspecified)</td>
</tr>
<tr>
<th>Diaphragm</th>
<td>Aluminum-Coated</td>
<td>Aluminum-Coated</td>
<td>Aluminum-Coated</td>
</tr>
<tr>
<th>Driver Size</th>
<td>1.57" / 40 mm</td>
<td>1.57" / 40 mm</td>
<td>1.57" / 40 mm</td>
</tr>
<tr>
<th>Driver Type</th>
<td>Dynamic</td>
<td>Dynamic</td>
<td>Dynamic</td>
</tr>
<tr>
<th>Earpiece Connection / Wearing Style</th>
<td>Headband</td>
<td>Headband</td>
<td>Headband</td>
</tr>
<tr>
<th>Earpiece Design</th>
<td>Over-Ear (Circumaural), Closed-Back</td>
<td>Over-Ear (Circumaural), Closed-Back</td>
<td>Over-Ear (Circumaural), Closed-Back</td>
</tr>
<tr>
<th>Earpiece Swivel</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th>Foldable</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th>Full Remote OS Support</th>
<td>Android, iOS</td>
<td>Android, iOS</td>
<td>Android, iOS</td>
</tr>
<tr>
<th>Magnet Type</th>
<td>Neodymium</td>
<td>Neodymium</td>
<td>Neodymium</td>
</tr>
<tr>
<th>Number of Drivers</th>
<td>1, per Earpiece</td>
<td>1, per Earpiece</td>
<td>1, per Earpiece</td>
</tr>
<tr>
<th>Sensors</th>
<td>Proximity, Touch</td>
<td>Proximity, Touch</td>
<td>Proximity, Touch</td>
</tr>
<tr>
<th>Voice Coil</th>
<td>Copper-Clad Aluminum Wire</td>
<td>Copper-Clad Aluminum Wire</td>
<td>Copper-Clad Aluminum Wire</td>
</tr>
</tbody>
<tbody>
<tr class="SpecCatHeader">
<td colspan="4" onclick="toggleSpecCat(this, 'CatMicrophone')">
<span>Microphone</span>
</td>
</tr>
</tbody>
<tbody class="SpecCat CatMicrophone">
<tr>
<th>Beamforming Support</th>
<td>No</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<th>Noise Canceling</th>
<td>Not Specified by Manufacturer</td>
<td>Not Specified by Manufacturer</td>
<td>Not Specified by Manufacturer</td>
</tr>
<tr>
<th>Number of Mics</th>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<th>Type</th>
<td>MEMS</td>
<td>MEMS</td>
<td>MEMS</td>
</tr>
</tbody>
<tbody>
<tr class="SpecCatHeader">
<td colspan="4" onclick="toggleSpecCat(this, 'CatPerformance')">
<span>Performance</span>
</td>
</tr>
</tbody>
<tbody class="SpecCat CatPerformance">
<tr>
<th>Frequency Response</th>
<td>4 Hz to 40 kHz (Wired)</td>
<td>4 Hz to 40 kHz (Wired)</td>
<td>4 Hz to 40 kHz (Wired)</td>
</tr>
<tr>
<th>Sensitivity</th>
<td>101 dB at 1 kHz (Passive) 105 dB at 1 kHz (Active)</td>
<td>101 dB at 1 kHz (Passive) 105 dB at 1 kHz (Active)</td>
<td>101 dB at 1 kHz (Passive) 105 dB at 1 kHz (Active)</td>
</tr>
<tr>
<th>Storage Capacity</th>
<td>None</td>
<td>None</td>
<td>None</td>
</tr>
</tbody>
</table>

Related

How to design a Table with a fixed header during printing without cutting the header?

I had this Table, I want when I print the table, should print with a fixed header on each paper, and it's doing that, but the headers does not start on the top of the paper, something going wrong
<table id="TableDtl" class="tableClass cellWithborder"
style="width:100%;overflow:scroll; font-weight:bold; border: 1px solid Black;">
<thead>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header0>ID</header0>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header1>NAME</header1>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header2>Quantity</header2>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header3>Per</header3>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header4>Price</header4>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header5>Free</header5>
</th>
</thead>
<tbody>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
</tbody>
</table>
I search about it a lot and I try something like this style:
<style>
#media print {
#page{
margin:1em;
}
table {
page-break-after:auto;
border-collapse:collapse;
}
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead {
display:table-header-group;
}
tfoot { display:table-footer-group }
}
</style>
It didn't work at all, and I try playing with (page-break-before, page-break-after, page-break-inside) and also nothing happen 😐

<style type="text/css">
#media print{ input {display:none} };
</style>
<input type=button value="print" onclick=javascript:window.print()>
<table id="TableDtl" class="tableClass cellWithborder"
style="width:100%;overflow:scroll; font-weight:bold; border: 1px solid Black;" >
<thead>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header0>ID</header0>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header1>NAME</header1>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header2>Quantity</header2>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header3>Per</header3>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header4>Price</header4>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header5>Free</header5>
</th>
</thead>
<tbody>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
</tbody>
</table>
I have fixed header display issue on print's every page. You need to add multiple TR inside TBODY and check the result. If any issue found then let me know

You have to set display of thead: table-header-group
thead {
display: table-header-group
}
Demo:
table {
border-collapse:collapse;
height: 400px;
}
td, th {
text-align: center;
padding: 8px;
}
table, td, th {
border: 1px solid #dddddd;
}
#media print {
#page{
margin:1em;
}
table {
page-break-after:auto;
}
td, th {
padding: 8px;
}
tr {
page-break-inside:avoid; page-break-after:auto
}
td { page-break-inside:avoid; page-break-after:auto }
thead {
display:table-header-group; /* <== here */
}
tfoot { display:table-footer-group }
}
<input type="button" value="Print" onclick="window.print()">
<br />
<br />
<table>
<thead>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header0>ID</header0>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header1>NAME</header1>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header2>Quantity</header2>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header3>Per</header3>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header4>Price</header4>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header5>Free</header5>
</th>
</thead>
<tbody>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
</tbody>
</table>

Align columns from tbody under their column title in thead

At the beginning it was a simple table with no css styling on it.
The first requirement was to make it scrollable and with a fixed height.
In order do to that it was added:
height: 275px;
overflow: scroll;
It wasn't enough, it also needed display: block;.
Now, the thead looks bad, so I added display: table; to it.
It looks quite good but it still has a problem, the columns are not aligned vertically.
For example, the column with the title Test2 should have under it the column with $test but that it's not happening.
Is there a way to align those columns and keep the scrolling functionality?
.my-table {
width: 100%;
}
.my-thead {
display: table;
}
.my-tbody {
display: block;
height: 275px;
overflow: scroll;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<table class="my-table">
<thead class="my-thead">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Column</th>
<th>Test</th>
<th>Test2</th>
<th>Priceeeee</th>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody class="my-tbody">
<tr>
<td>January</td>
<td>$100</td>
<td>test</td>
<td>aaaaaaaa</td>
<td>$test</td>
<td>12314332</td>
<td>$test</td>
<td>33333324</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>March</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>May</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>June</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>July</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>August</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>September</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>testesttest</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
</tbody>
</table>
</body>
</html>

columns can be vertically aligned by adding width property. Add the below given css:
th {
min-width: 130px;
text-align: left;
}
td {
width: 130px;
text-align: left;
}
.my-table {
width: 100%;
}
.my-thead {
display: table;
}
.my-tbody {
display: block;
height: 275px;
overflow: scroll;
}
th {
min-width: 130px;
text-align: left;
}
td {
width: 130px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<table class="my-table">
<thead class="my-thead">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Column</th>
<th>Test</th>
<th>Test2</th>
<th>Priceeeee</th>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody class="my-tbody">
<tr>
<td>January</td>
<td>$100</td>
<td>test</td>
<td>aaaaaaaa</td>
<td>$test</td>
<td>12314332</td>
<td>$test</td>
<td>33333324</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>March</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>May</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>June</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>July</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>August</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>September</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>testesttest</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
</tbody>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
border:solid 1px black;
}
thead th {
background-color:grey;
border-bottom: none;
border-right: 1px solid #CCC;
font-weight: bold;
color: #fff;
padding: 4px 3px 4px 4px;
text-align: left;
width: 80px;
}
thead{
display:block;
}
tbody {
height: 275px;
overflow-y:scroll;
display:block;
}
tbody td {
background: #FFF;
border-bottom: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 4px 3px 4px 4px;
}
th,td{
width: 80px;
}
</style>
</head>
<body>
<table class="my-table">
<thead class="my-thead">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Column</th>
<th>Test</th>
<th>Test2</th>
<th>Priceeeee</th>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody class="my-tbody">
<tr>
<td>January</td>
<td>$100</td>
<td>test</td>
<td>aaaaaaaa</td>
<td>$test</td>
<td>12314332</td>
<td>$test</td>
<td>33333324</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>March</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>May</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>June</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>July</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>August</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>September</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$1

DataTables Nested Tables without Ajax and Javascript

Im using DataTables.Js in my project. I want to add a nested table after each row, but without Ajax or javascript,JUST PURE HTML. below is an example.
#example th {
background: #eeb;
border: solid 1px #eba;
}
#example td {
background: #ddd;
border: solid 1px #4a4;
}
#example table td {
background: #ccf;
border: solid 1px #555;
}
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<tr>
<td colspan="5">
<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
<tbody>
<tr>
<td>Full name:</td>
<td>Airi Satou</td>
</tr>
<tr>
<td>Extension number:</td>
<td>5407</td>
</tr>
<tr>
<td>Extra info:</td>
<td>And any further details here (images etc)...</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
</tbody>
</table>
The table renders but the sorting filters don't work. How can I go around this so that the sorting filters work and the details rows always respond to the parent row filtering?

Table floating header is also adding and extra vertical scroll-bar in internet explorer

In internet explorer, table floating headers are also adding extra vertical scrollbar in table and a little white-space at table bottom. But changing font-size from 17px to 16px removes the extra scroll-bar and whitespace. Is there a way to use font-size 17px without adding an extra scroll-bar and without extra whitespace at table bottom in internet explorer?
fiddle: https://jsfiddle.net/bsxx39vo/
My screen size is 1366x768 and os windows 10.
This problem is also in firefox at some zoom levels.
And i am totally unable to understand why is this happening.
Js:
/*
* jQuery throttle / debounce - v1.1 - 3/7/2010
* http://benalman.com/projects/jquery-throttle-debounce-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
$(function(){
$('table').each(function() {
if($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
// Clone <thead>
var $w = $(window),
$t = $(this),
$thead = $t.find('thead').clone(),
$col = $t.find('thead, tbody').clone();
// Add class, remove margins, reset width and wrap table
$t
.addClass('sticky-enabled')
.css({
margin: 0,
width: '100%'
}).wrap('<div class="sticky-wrap" />');
if($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');
// Create new sticky table head (basic)
$t.after('<table class="sticky-thead" />');
// If <tbody> contains <th>, then we create sticky column and intersect (advanced)
if($t.find('tbody th').length > 0) {
$t.after('<table class="sticky-col" /><table class="sticky-intersect" />');
}
// Create shorthand for things
var $stickyHead = $(this).siblings('.sticky-thead'),
$stickyCol = $(this).siblings('.sticky-col'),
$stickyInsct = $(this).siblings('.sticky-intersect'),
$stickyWrap = $(this).parent('.sticky-wrap');
$stickyHead.append($thead);
$stickyCol
.append($col)
.find('thead th:gt(0)').remove()
.end()
.find('tbody td').remove();
$stickyInsct.html('<thead><tr><th>'+$t.find('thead th:first-child').html()+'</th></tr></thead>');
// Set widths
var setWidths = function () {
$t
.find('thead th').each(function (i) {
$stickyHead.find('th').eq(i).width($(this).width());
})
.end()
.find('tr').each(function (i) {
$stickyCol.find('tr').eq(i).height($(this).height());
});
// Set width of sticky table head
$stickyHead.width($t.width());
// Set width of sticky table col
$stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())
},
repositionStickyHead = function () {
// Return value of calculated allowance
var allowance = calcAllowance();
// Check if wrapper parent is overflowing along the y-axis
if($t.height() > $stickyWrap.height()) {
// If it is overflowing (advanced layout)
// Position sticky header based on wrapper scrollTop()
if($stickyWrap.scrollTop() > 0) {
// When top of wrapping parent is out of view
$stickyHead.add($stickyInsct).css({
opacity: 1,
top: $stickyWrap.scrollTop()
});
} else {
// When top of wrapping parent is in view
$stickyHead.add($stickyInsct).css({
opacity: 0,
top: 0
});
}
} else {
// If it is not overflowing (basic layout)
// Position sticky header based on viewport scrollTop
if($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {
// When top of viewport is in the table itself
$stickyHead.add($stickyInsct).css({
opacity: 1,
top: $w.scrollTop() - $t.offset().top
});
} else {
// When top of viewport is above or below table
$stickyHead.add($stickyInsct).css({
opacity: 0,
top: 0
});
}
}
},
repositionStickyCol = function () {
if($stickyWrap.scrollLeft() > 0) {
// When left of wrapping parent is out of view
$stickyCol.add($stickyInsct).css({
opacity: 1,
left: $stickyWrap.scrollLeft()
});
} else {
// When left of wrapping parent is in view
$stickyCol
.css({ opacity: 0 })
.add($stickyInsct).css({ left: 0 });
}
},
calcAllowance = function () {
var a = 0;
// Calculate allowance
$t.find('tbody tr:lt(3)').each(function () {
a += $(this).height();
});
// Set fail safe limit (last three row might be too tall)
// Set arbitrary limit at 0.25 of viewport height, or you can use an arbitrary pixel value
if(a > $w.height()*0.25) {
a = $w.height()*0.25;
}
// Add the height of sticky header
a += $stickyHead.height();
return a;
};
setWidths();
$t.parent('.sticky-wrap').scroll($.throttle(15, function() {
repositionStickyHead();
repositionStickyCol();
}));
$w
.load(setWidths)
.resize($.debounce(250, function () {
setWidths();
repositionStickyHead();
repositionStickyCol();
}))
.scroll($.throttle(15, repositionStickyHead));
}
});
});
Css:
body{ margin:0; font-size:17px; color:#333; font-family:Arial, sans-serif; line-height:1.8em; background:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a{ color:#333; }
table{ border-spacing:0; white-space:nowrap; cursor:default; line-height:1.4em; }
table thead th{ border:1px solid #ccc; text-align:center; vertical-align:middle; background:#339966; color:#eee; padding:16px 8px; font-weight:normal; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; }
table thead th a{ color:#fff; }
table thead th a:hover{ color:#54b9f8; }
table tbody th{ border:1px solid #fff; text-align:center; vertical-align:middle; background:#ddd; color:#222; padding:16px 8px; font-weight:normal; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; }
table tbody th a{ color:#222; }
table tbody th a:hover{ color:#076cab; }
table td{ padding:8px; border:1px solid #ccc; }
table > thead > tr > th{ vertical-align:top; }
.sticky-wrap{ position:relative; overflow-x:auto; margin:80px 1% 90px; }
.sticky-wrap .sticky-thead, .sticky-wrap .sticky-col, .sticky-wrap .sticky-intersect{ position:absolute; top:0; }
.sticky-wrap .sticky-intersect{ opacity:1; z-index:10; display:none; }
.sticky-wrap td, .sticky-wrap th{ box-sizing:border-box; }
.sticky-wrap .sticky-thead{ transition:all 0.35s 0.1s ease-in-out; -o-transition:all 0.35s 0.1s ease-in-out; -moz-transition:all 0.35s 0.1s ease-in-out; -webkit-transition:all 0.35s 0.1s ease-in-out; box-shadow:0em 0.1em 0.4em 0em rgba(0,0,0,0.7); -moz-box-shadow:0em 0.1em 0.4em 0em rgba(0,0,0,0.7); -webkit-box-shadow:0em 0.1em 0.4em 0em rgba(0,0,0,0.7); }
.sticky-wrap .sticky-col { transition:all 0.125s 0.1s ease-in-out; -o-transition:all 0.125s 0.1s ease-in-out; -moz-transition:all 0.125s 0.1s ease-in-out; -webkit-transition:all 0.125s 0.1s ease-in-out; box-shadow:0.1em 0em 0.4em 0em rgba(0,0,0,0.5); -moz-box-shadow:0.1em 0em 0.4em 0em rgba(0,0,0,0.5); -webkit-box-shadow:0.1em 0em 0.4em 0em rgba(0,0,0,0.5); }
Html:
<table>
<thead>
<tr>
<th scope="row">Platforms</th>
<th scope="col">domain options</th>
<th scope="col">hosting available</th>
<th scope="col"><em>bandwidth</em></th>
<th scope="col">customer support </th>
<th colspan="2" rowspan="1" scope="col">ease of use community <br />
ratings</th>
<th scope="col"><strong><em> user ratings</em></strong></th>
<th scope="col">pros</th>
<th scope="col">cons</th>
<th scope="col">cost</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Blogger</th>
<td>yes</td>
<td>yes</td>
<td>12gb</td>
<td>yes</td>
<td>9</td>
<td>3</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>lack of many features</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row"><em>Wordpress</em></th>
<td>yes</td>
<td>no</td>
<td><em>12gb</em></td>
<td>yes</td>
<td>8</td>
<td>6</td>
<td>8</td>
<td><em> very good support and users support</em></td>
<td> lack of enough themes</td>
<td>$500.00 per year</td>
</tr>
<tr>
<th scope="row">Tumblr</th>
<td>no</td>
<td>yes</td>
<td>23gb</td>
<td>yes</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td>Free of cost</td>
</tr>
<tr>
<th rowspan="4" scope="row">Typepad</th>
<td>yes</td>
<td rowspan="3">no</td>
<td rowspan="3">12gb</td>
<td rowspan="3">-</td>
<td rowspan="3">8</td>
<td rowspan="3">6</td>
<td rowspan="4">7</td>
<td rowspan="4">user friendly, and very easy</td>
<td rowspan="4">very few plugins</td>
<td rowspan="4"> $500.00 per year</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>-</td>
<td>available</td>
<td>limited upload</td>
<td>yes</td>
<td colspan="2"> </td>
</tr>
<tr>
<th scope="row">CMS1</th>
<td>yes</td>
<td><strong>yes</strong></td>
<td>0gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>highly customizable and flexible</td>
<td>lack of enough themes</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">CMS2</th>
<td>yes</td>
<td>yes</td>
<td>e23gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>7</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row">Movabletype</th>
<td>yes</td>
<td>no</td>
<td>4gb</td>
<td>yes</td>
<td colspan="2">5</td>
<td>8</td>
<td><strong>easy to maintain</strong></td>
<td>lack of enough themes</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row">squarespace</th>
<td>no</td>
<td>yes</td>
<td>unlimited download</td>
<td>no</td>
<td colspan="2">9</td>
<td>5</td>
<td><em>user friendly, and very easy</em></td>
<td>very few plugins</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">wp.org</th>
<td>yes</td>
<td>yes</td>
<td>1gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>lack of enough themes</td>
<td>Free of cost</td>
</tr>
<tr>
<th scope="row">blogger</th>
<td>yes</td>
<td>yes</td>
<td>12gb</td>
<td>yes</td>
<td colspan="2">9</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>lack of many features</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">wordpress</th>
<td>yes</td>
<td>no</td>
<td>12gb</td>
<td>yes</td>
<td colspan="2">8</td>
<td>8</td>
<td> very good support and users support</td>
<td> lack of enough themes</td>
<td>$500.00 per year</td>
</tr>
<tr>
<th scope="row">tumblr</th>
<td>no</td>
<td>yes</td>
<td>23gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td>Free of cost</td>
</tr>
<tr>
<th scope="row">typepad</th>
<td>yes</td>
<td>no</td>
<td>12gb</td>
<td>-</td>
<td colspan="2">8</td>
<td>7</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row">cms1</th>
<td>yes</td>
<td>yes</td>
<td>0gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>highly customizable and flexible</td>
<td>lack of enough themes</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">cms2</th>
<td>yes</td>
<td>yes</td>
<td>23gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>7</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row">movabletype</th>
<td>yes</td>
<td>no</td>
<td>4gb</td>
<td>yes</td>
<td colspan="2">5</td>
<td>8</td>
<td>easy to maintain</td>
<td>lack of enough themes</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row">squarespace</th>
<td>no</td>
<td>yes</td>
<td>unlimited download</td>
<td>no</td>
<td colspan="2">9</td>
<td>5</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">wp.org</th>
<td>yes</td>
<td>yes</td>
<td>1gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>lack of enough themes</td>
<td>Free of cost</td>
</tr>
<tr>
<th scope="row">blogger</th>
<td>yes</td>
<td>yes</td>
<td><em>12gb</em></td>
<td>yes</td>
<td colspan="2">9</td>
<td>9</td>
<td><em>user friendly, and very easy</em></td>
<td>lack of many features</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">wordpress</th>
<td>yes</td>
<td>no</td>
<td>12gb</td>
<td>yes</td>
<td colspan="2">8</td>
<td>8</td>
<td> very good support and users support</td>
<td> lack of enough themes</td>
<td>$500.00 per year</td>
</tr>
<tr>
<th scope="row">tumblr</th>
<td>no</td>
<td>yes</td>
<td>23gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td>Free of cost</td>
</tr>
<tr>
<th scope="row">typepad</th>
<td>yes</td>
<td>no</td>
<td>12gb</td>
<td>-</td>
<td colspan="2">8</td>
<td>7</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row">cms1</th>
<td>yes</td>
<td>yes</td>
<td>0gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>highly customizable and flexible</td>
<td>lack of enough themes</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">cms2</th>
<td>yes</td>
<td>yes</td>
<td>23gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>7</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row">movabletype</th>
<td>yes</td>
<td>no</td>
<td>4gb</td>
<td>yes</td>
<td colspan="2">5</td>
<td>8</td>
<td>easy to maintain</td>
<td>lack of enough themes</td>
<td> $500.00 per year</td>
</tr>
<tr>
<th scope="row">squarespace</th>
<td>no</td>
<td>yes</td>
<td>unlimited download</td>
<td>no</td>
<td colspan="2">9</td>
<td>5</td>
<td>user friendly, and very easy</td>
<td>very few plugins</td>
<td>$1000.00 per year</td>
</tr>
<tr>
<th scope="row">wp.org</th>
<td>yes</td>
<td>yes</td>
<td>1gb</td>
<td>yes</td>
<td colspan="2">7</td>
<td>9</td>
<td>user friendly, and very easy</td>
<td>lack of enough themes</td>
<td>Free of cost</td>
</tr>
</tbody>
</table>

scrolling horizontally with fixed left div

I'm looking for a way to scroll horizontally in a div view, with on the left a sidebar that is fixed. So when there is scrolling (horizontal), everything disappears behind this sidebar.
To illustrate:
I do not know how this can be done precisely. Can this only through CSS or do it in conjunction with Javascript? And if so, how exactly?
Here's [my working fiddle so far]
ssss(http://jsfiddle.net/justamir/fp2xgqL5/)

If you are using a table, to make it scrollable you place it within a div with overflow. If you want a fix column, this must be placed outside the overflowed div. You end up with a layout like this:
.scrollable {
width: 100px;
overflow: auto;
}
.fixed,
.scrollable {
float: left;
}
<table class="fixed">
<tr>
<th>FIXED</th>
</tr>
<tr>
<td>val1</td>
</tr>
<tr>
<td>val2</td>
</tr>
<tr>
<td>val3</td>
</tr>
<tr>
<td>val4</td>
</tr>
</table>
<div class="scrollable">
<table>
<tr>
<th>col1</th>
<th>col1</th>
<th>col1</th>
<th>col1</th>
<th>col1</th>
<th>col1</th>
</tr>
<tr>
<td>val1</td>
<td>val1</td>
<td>val1</td>
<td>val1</td>
<td>val1</td>
<td>val1</td>
</tr>
<tr>
<td>val2</td>
<td>val2</td>
<td>val2</td>
<td>val2</td>
<td>val2</td>
<td>val2</td>
</tr>
<tr>
<td>val3</td>
<td>val3</td>
<td>val3</td>
<td>val3</td>
<td>val3</td>
<td>val3</td>
</tr>
<tr>
<td>val4</td>
<td>val4</td>
<td>val4</td>
<td>val4</td>
<td>val4</td>
<td>val4</td>
</tr>
</table>
</div>

Categories

Resources