fixed thead doesnt match tbody - html

I got my code sample saved on https://jsfiddle.net/n7ynjs1t/
All what I need is a simple normal table even with thead fixed on scroll.
CSS:
table {
width: 100%;
}
thead {
width: 100%;
display: table;
}
tbody {
overflow: auto;
height: 200px;
display: block;
}
td {
width: 100px;
}
HTML:
<thead>
<td width=100 align='center'> id </td>
<td width=100 align='center'> head1 </td>
<td width=100 align='center'> head2 </td>
<td width=100 align='center'> head3 </td>
<td width=100 align='center'> head4 </td>
<td width=100 align='center'> head5 </td>
<td width=100 align='center'> head6 </td>
<td width=100 align='center'> head7 </td>
<td width=100 align='center'> head8 </td>
<td width=100 align='center'> head9 </td>
<td width=100 align='center'> head10</td>
<td width=100 align='center'> head11</td>
</thead>
<tr>
<td width=100 align='center'> id </td>
<td width=100 align='center'> 1 </td>
<td width=100 align='center'> 2 </td>
<td width=100 align='center'> 3 </td>
<td width=100 align='center'> 4 </td>
<td width=100 align='center'> 5 </td>
<td width=100 align='center'> 6 </td>
<td width=100 align='center'> 7 </td>
<td width=100 align='center'> 8 </td>
<td width=100 align='center'> 9 </td>
<td width=100 align='center'> 0 </td>
<td width=100 align='center'> 11</td>
</tr>
// The same table rows repeats many times
</tbody>
</table>


I think the closest you will get is this.
You will not be able to "auto size" the headers with the table cells and vice versa, so those widths should be "hard coded".
Also, to make the headers "fit" and make up for the body's scrollbar, add padding. in the below code I added a padding of "15px" for the "thead", who does not have a scrollbar.
EDIT:
Here's a fiddle: https://jsfiddle.net/FredM7/25abq8gf/
See this full HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
table {
width: 200px;
background: green;
}
table tbody, table thead
{
display: block;
}
table thead
{
padding-right: 15px;
}
table tbody
{
overflow: auto;
height: 100px;
}
thead th, tbody td {
width: 72px;
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>
Head 1
</th>
<th>
Head 2
</th>
<th>
Head 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
</table>
</body>
</html>

Related

Change color text if values are different (only CSS and jquery)

My code has the following lines:
<div class="verizon-data-duplicate-device-key-89148000004605691537 k-content k-state-active" style="float: left; opacity: 1; display: block;" id="3cf455cc-9777-446b-b733-c60795e419e7-3" role="tabpanel" aria-expanded="true">
<table style="border-collapse: collapse; padding: 3px; border: 1px solid grey;">
<tbody>
<tr>
<td colspan="2">
Verizon Information:
</td>
</tr>
<tr>
<td style="text-align:right;">
Account Name
</td>
<td>
<span>0442047510-00001</span><br>
<span>0442047510-00001</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Billing Cycle End Date
</td>
<td>
<span>2021-07-01T00:00:00</span><br>
<span>2022-01-12T00:00:00</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Carrier Name
</td>
<td>
<span>null</span><br>
<span>null</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Service Plan
</td>
<td>
<span>40515x48526x75802x84777</span><br>
<span>M2MPublicDynamic</span><br>
</td>
</tr>
</tbody>
</table>
</div>
page has many different with different class value keys:
div class="verizon-data-duplicate-device-key-**89148000004605691537** k-content k-state-active"
where 89148000004605691537 is variable
I want to change text color to red for cases, when values inside span for the same td is different.
E.g.:
<td>
<span>2021-07-01T00:00:00</span><br>
<span>2022-01-12T00:00:00</span><br>
</td>
should be red
but
<td>
<span>0442047510-00001</span><br>
<span>0442047510-00001</span><br>
</td>
should not be red.
And compares should be inside only the same td.
Any css classes can be added.
How to implement it?

$("table td").map(function(e) {
if($(this).children("span").length){
if($(this).children("span").contents()[0].textContent != $(this).children("span").contents()[1].textContent){
$(this).addClass("text-danger");
}
}
});
.text-danger {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verizon-data-duplicate-device-key-89148000004605691537 k-content k-state-active" style="float: left; opacity: 1; display: block;" id="3cf455cc-9777-446b-b733-c60795e419e7-3" role="tabpanel" aria-expanded="true">
<table style="border-collapse: collapse; padding: 3px; border: 1px solid grey;" border="1">
<tbody>
<tr>
<td colspan="2">
Verizon Information:
</td>
</tr>
<tr>
<td style="text-align:right;">
Account Name
</td>
<td>
<span>0442047510-00001</span><br>
<span>0442047510-00001</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Billing Cycle End Date
</td>
<td>
<span>2021-07-01T00:00:00</span><br>
<span>2022-01-12T00:00:00</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Carrier Name
</td>
<td>
<span>null</span><br>
<span>null</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Service Plan
</td>
<td>
<span>40515x48526x75802x84777</span><br>
<span>M2MPublicDynamic</span><br>
</td>
</tr>
</tbody>
</table>
</div>

//searches cells containing two spans
//if the two spans don't have the same text content, add the class to
//the spans to color the text red
$('td').each(function(){
const $td = $(this);
const $spans = $td.find('span');
if($spans.length === 2){
if($spans[0].textContent !== $spans[1].textContent){
$spans[0].classList.add('color-red');
$spans[1].classList.add('color-red');
}
}
});
.color-red{
color:red;
}
<div class="verizon-data-duplicate-device-key-89148000004605691537 k-content k-state-active" style="float: left; opacity: 1; display: block;" id="3cf455cc-9777-446b-b733-c60795e419e7-3" role="tabpanel" aria-expanded="true">
<table style="border-collapse: collapse; padding: 3px; border: 1px solid grey;">
<tbody>
<tr>
<td colspan="2">
Verizon Information:
</td>
</tr>
<tr>
<td style="text-align:right;">
Account Name
</td>
<td>
<span>0442047510-00001</span><br>
<span>0442047510-00001</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Billing Cycle End Date
</td>
<td>
<span>2021-07-01T00:00:00</span><br>
<span>2022-01-12T00:00:00</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Carrier Name
</td>
<td>
<span>null</span><br>
<span>null</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Service Plan
</td>
<td>
<span>40515x48526x75802x84777</span><br>
<span>M2MPublicDynamic</span><br>
</td>
</tr>
</tbody>
</table>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"></script>

Can you create a web page table structure given below:

Click here to view structure
Each table cell is identified with a letter and all dimensions are in pixels.
The letters and dimensions shown in the table must NOT appear on your
final web page.
The external table border must have a width of 4 pixels and all internal
grid lines on the table must have a width of 2 pixels. Table borders and
grid lines must be visible.
<!DOCTYPE html>
<html>
<head>
<title> Nested Table </title>
</head>
<body>
<table border="4px" align="center" width=100%>
<tr>
<td height="300px" width="400px"> A 400 X 300 </td>
<td height="300px" width="400px"> B 400 X 300 </td>
<td height="300px" width="400px"> C 400 X 300 </td>
</tr>
<tr>
<td colspan=3 height="250px" width="1200px"> D 1200 X 250 </td>
</tr>
<tr>
<td colspan=3 height="150px" width="1200px"> E 1200 X 150 </td>
</tr>
<tr>
<table border="4" align="center">
<tr>
<td height="300px" width="50%"> F 600 X 300 </td>
<td height="300px" width="600px"> G 600 X 300 </td>
</tr>
</tr>
</table>
</html>

tr:first-child td{
height:100px;
width:100px;
}
tr:nth-child(2) td{
height:60px;
}
tr:nth-child(3) td{
height:40px;
}
tr:nth-child(4) td{
height:100px;
width:50%;
}
<table border="1">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan = "3">
</td>
</tr>
<tr>
<td colspan = "3">
</td>
</tr>
<tr>
<td colspan = "2">
</td>
<td>
</td>
</tr>
</table>

Rowspan not working as expected

I am trying to create a table layout as shown in below image:
Below is my Html code:
<html>
<head>
<meta charset="UTF-8" />
<title>Table sketch</title>
<style>
table {
table-layout: fixed;
width: 20em;
}
td {
width: 4em;
height: 1.5em;
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td colspan="4"> 1 </td>
</tr>
<tr>
<td rowspan="2"> 2 </td>
<td rowspan="2"> 3 </td>
</tr>
<tr>
<td colspan="2"> 4 </td>
</tr>
<tr>
<td> 5 </td><td> 6 </td>
</tr>
<tr>
<td colspan="4"> 7 </td>
</tr>
</table>
</body>
But it generates below layout:
When I change rowspan value from 2 to 3 for second row. It gives me right layout.
<tr>
<td rowspan="3"> 2 </td>
<td rowspan="3"> 3 </td>
</tr>
Here is a link to jsbin.
But why is first html code not working?
Any help is much appreciated.
Thanks.

You have one tr tag too much: The second row has to contain 3 elements (i.e. no separate tr for the third element in that row):
table {
table-layout: fixed;
width: 20em;
}
td {
width: 4em;
height: 1.5em;
text-align: center;
}
<body>
<table border="1">
<tr>
<td colspan="4"> 1 </td>
</tr>
<tr>
<td rowspan="2"> 2 </td>
<td rowspan="2"> 3 </td>
<td colspan="2"> 4 </td>
</tr>
<tr>
<td> 5 </td><td> 6 </td>
</tr>
<tr>
<td colspan="4"> 7 </td>
</tr>
</table>
</body>

Making a wide table, collapse into rows on mobile

We have some product data that has varying table data. Sometimes there is 2 column, then perhaps 4. When there is 4 columns, it causes problems on mobile and doesn't fit with our responsive layout.
Can anyone help get the table to work better on mobile.
Here is the original table: https://jsfiddle.net/Lnjsv48g/
A guide I am using: https://css-tricks.com/examples/ResponsiveTables/responsive.php
Here is my responsive attempt: https://jsfiddle.net/f1z6czeo/
<table align="center" border="2" style="height:445px; width:761px">
<caption>Technical Information</caption>
<tbody>
<tr>
<td>Washer Speeds</td>
<td>Speed 1</td>
<td>Speed 2</td>
<td>Speed 3</td>
</tr>
<tr>
<td>Revs per minute squared</td>
<td>480m³/hr</td>
<td>600m³/hr</td>
<td>950³/hr</td>
</tr>
<tr>
<td>Extraction Rate ³/hr Recirculated</td>
<td>322m³/hr</td>
<td>402m³/hr</td>
<td>636m³/hr</td>
</tr>
<tr>
<td>Noise Levels DB/A</td>
<td>54 DB</td>
<td>57 DB</td>
<td>63 DB</td>
</tr>
<tr>
<td>Minimum Height of Product</td>
<td>No Less Than 650mm From Your Base</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>DPP Rating</td>
<td>D</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Backup Filter (Optional Extra)</td>
<td>Round 5 (2 Filters required)</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Light Options</td>
<td>2x 1.2w LED Bulk BBT299</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Marble Size (Marble Kit optional Extra)</td>
<td>125mm Minimum(150mm is recommended)(Up to 4 Mtr Only)</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Remote Control</td>
<td>No</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Warranty (Subject to registration)</td>
<td>3 years</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>BPP Scheme Colour Code</td>
<td>N/A</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>BOR Rand Filters (Cleaner Safe)</td>
<td>Y</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Box Type</td>
<td>3 Amp</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Gang Type</td>
<td>Toggle Control</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<table border="0" style="height:82px; width:273px">
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Installation Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0">
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Product Specification Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

Here is an solution: look at snippet
#media only screen and (max-width: 760px){
table {
width: 100%;
border-collapse: collapse;
border: none;
}
table, thead, tbody, th {
display: block;
}
tbody, td, tr {
display: inline-block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr.techinfo {
border: 1px solid #aaa;
width: 100%;
background: #eee;
box-sizing: border-box;
}
.techinfo > td {
float: right;
width: 60%;
display: inline-block;
background: #eee;
padding-left: 3px;
border: none;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
}
.techinfo > td:first-child {
width: 39%;
float: left;
line-height: 4em;
}
.techinfo > td:nth-child(2){
background: #bbb;
}
.techinfo > td:nth-child(3){
background: #ccc;
}
.techinfo > td:nth-child(4){
background: #ddd;
}
.docs {
width: 100%;
border: none;
}
.docs > td {
width: 100%;
box-sizing: border-box;
background-color: #eee;
}
.docs > td > table {
box-sizing: border-box;
padding: 0 3px;
}
.docs > td tr {
border: none;
box-sizing: border-box;
}
}
<table align="center" border="2">
<caption>Technical Information</caption>
<tbody>
<tr class="techinfo">
<td>Washer Speeds</td>
<td>Speed 1</td>
<td>Speed 2</td>
<td>Speed 3</td>
</tr>
<tr class="techinfo">
<td>Revs per minute squared</td>
<td>480m³/hr</td>
<td>600m³/hr</td>
<td>950³/hr</td>
</tr>
<tr class="techinfo">
<td>Extraction Rate ³/hr Recirculated</td>
<td>322m³/hr</td>
<td>402m³/hr</td>
<td>636m³/hr</td>
</tr>
<tr class="techinfo">
<td>Noise Levels DB/A</td>
<td>54 DB</td>
<td>57 DB</td>
<td>63 DB</td>
</tr>
<tr class="techinfo">
<td>Minimum Height of Product</td>
<td>No Less Than 650mm From Your Base</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>DPP Rating</td>
<td>D</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Backup Filter (Optional Extra)</td>
<td>Round 5 (2 Filters required)</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Light Options</td>
<td>2x 1.2w LED Bulk BBT299</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Marble Size (Marble Kit optional Extra)</td>
<td>125mm Minimum(150mm is recommended)(Up to 4 Mtr Only)</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Remote Control</td>
<td>No</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Warranty(Subject to registration)</td>
<td>3 years</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>BPP Scheme Colour Code</td>
<td>N/A</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>BOR Rand Filters (Cleaner Safe)</td>
<td>Y</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Box Type</td>
<td>3 Amp</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Gang Type</td>
<td>Toggle Control</td>
<td> </td>
<td> </td>
</tr>
<tr class="docs">
<td>
<table>
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Installation Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Product Specification Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

i would suggest using text-align:center instead of padding:50% as this doesn't align very well.
That said, it does appear that your table re-renders at the appropriate size. What is it you are wanting it to do specifically? Could you mock-up an 'after' image?
Lastly, this may not be helpful for you if this is just a learning exercise, but a jQuery plugin exists to do exactly this: tablesaw

Issues with drawing a table using rowspan and colspan using HTML

I have started to draw a table in HTML. I desired to draw
Observe that 2.2 starts at center of 1.1 and 3.1 starts at center of 2.2.
The code I wrote for this is
<table border="3" width="400" height="200">
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
You can see the output. Can any one tell me why the output is not as i desired by suggesting the changes in the code. Thanks in advance.
After going through the comments I found that code is working fine in chrome. Problem is only in Firefox and Edge.

I think you will need to specify cell height in order to get this work.
table {
text-align:center;
border-collapse:collapse;
}
<table border="3" width="400" height="200">
<tr>
<td height="40" rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>

Try this style
<style media="screen">
table {
border-collapse: collapse;
}
table, tr, td {
border: 1px solid black;
}
.center {
text-align: center;
}
</style>
and your code for table,
<table width="400" height="200">
<tr>
<td rowspan="2">
<div class="center"> 1.1 </div>
</td>
<td>
<div class="center"> 1.2 </div>
</td>
</tr>
<tr>
<td rowspan="2">
<div class="center"> 2.2 </div>
</td>
</tr>
<tr>
<td>
<div class="center"> 3.1 </div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="center"> 4.1 </div>
</td>
</tr>
<table>

use border-collapse: collapse; to table style
try this code
table{
border-collapse: collapse;
}
td{
text-align:center;
}
<table border="3" width="500" height="300">
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>

your code is written fine for rowspans, check this if it helps
<table border="3" width="400" height="200">
<tr>
<td rowspan="3">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="3">2.2</td>
</tr>
<tr>
<td style="border: none;"></td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>