Duplicate <thead> across columns - html

Quite simple really. I've probably missed something obvious but here goes.
I have a <table> inside a multi-column view. The idea being, it's a fairly tall table so having it on multiple columns makes it less obnoxiously vertical and fits better on-screen.
The problem is that the rows in columns 2 and beyond have no header.
If I go to Print Preview, however, each column has a "copy" of the <thead> - as it should, IMO, since that's what the <thead> is for.
Is it possible to get this behaviour, apparently only available by default in #media print, to work on the webpage itself?
(Note that the table's contents are dynamic and the whole thing should be responsive, so manually inserting / breaking up the table is a no-go.)
#container {
column-count: 3;
}
<div id="container">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
</div>

Related

In a table with multiple thead how to make repeat last thead on a page break

I have a HTML question:
If I have a table with multiple thead, on printing this page, the repetition on top of next page is first thead and not the last one.
Example:
<table>
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
</tbody>
<thead>
<tr>
<th>TH 3</th>
<th>TH 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
</tr>
</tbody>
The second-page header shows TH1 and TH2 instead of TH3 and TH4 during print preview.
Is there a way to print TH3 and TH4?

Table rows growing to max?

<html>
<body style="background: white;">
<table style="height: 100%;width: 100%;">
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
results in:
(this is pasted in a new tab so there is no extra Css styling or anything going on)
How can I stop the rows from growing to their max height but rather to the content height? (preferably without setting a fixed 20px height to the row)
Edit: I want to the table to still fill the whole page

You could try using flexboxes to achieve that:
table,
tr {
display: flex;
width: 100%;
}
tbody {
width: 100%;
}
th,
td {
display: inline-flex;
flex-grow: 1;
}
<body style="background: white;">
<table style="height: 100%; width: 100%">
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
Just be mindful that you'll be loosing some of the table features.

Height 100% is not required
Remove it to take the minimum size table requires

Html table - vertical scroll with fixed header

I've a HTML table with many columns (even 50 columns!).
I'm trying to have the possibility to scroll horizontally (all the table) and vertically (with fixed header).
All the solutions listed in the following link have a small bug: if in Chrome I do ctrl+f to find a specific column name (my table have many columns!), the header doesn't scroll automatically horizontally (native functionality of Chrome).
The link with the solutions tried: HTML table with 100% width, with vertical scroll inside tbody
Any solution to propose?

You could put the table inside a div with max-width:100% and overflow-x: auto;. Using the accepted solution from the SO-post you linked I have created a simple example:
// Change the selector if needed
var $table = $('table.scroll'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Adjust the width of thead cells when window resizes
$(window).resize(function() {
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
}).resize(); // Trigger resize handler
.table-master {
max-width: 300px;
overflow-x: auto;
}
table.scroll {
/* width: 100%; */
/* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead {
display: block;
}
thead tr th {
height: 30px;
line-height: 30px;
/* text-align: left; */
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody {
border-top: 2px solid black;
}
tbody td,
thead th {
/* width: 20%; */
/* Optional */
border-right: 1px solid black;
/* white-space: nowrap; */
}
tbody td:last-child,
thead th:last-child {
border-right: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-master">
<table class="scroll">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
<th>Head 5</th>
<th>Head 5</th>
<th>Head 5</th>
<th>Head 5</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
</div>
In this example I used max-width:300px; to make the effect visible

I worked the last three days on this problem.
You may find some nice JQuery solutions.
Here is my approach in plain and pure JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta charset="utf-8">
<title>Table Test</title>
<script type="text/javascript">
window.onload = function() { NoScrollTables(); }
/* Set all tables, where a "noscroll-"+id exists to no scroll */
function NoScrollTables()
{
var list = document.getElementsByTagName('table');
for (var i = 0; i < list.length; i++)
{
if (document.getElementById('noscroll-' + list[i].id) != null) NoScrollTable(list[i].id);
}
};
/* Initialize a single table to no-scroll */
function NoScrollTable(TabId)
{
var headerwidth=[]; // Storage for width of main table
var maintab = document.getElementById(TabId);
var noscroll = document.getElementById('noscroll-'+TabId);
var restwidth = noscroll.offsetWidth;
for (var i = 0; i < maintab.rows[1].cells.length; i++) headerwidth[i] = maintab.rows[1].cells[i].clientWidth;
var content = maintab.rows[0].innerHTML;
noscroll.rows[0].innerHTML = content;
maintab.rows[0].innerHTML='';
for (i = 0; i < maintab.rows[1].cells.length; i++) // Set width for both tables identically
{
noscroll.rows[0].cells[i].width = headerwidth[i];
maintab.rows[1].cells[i].width = headerwidth[i];
restwidth = restwidth - headerwidth[i];
}
i--;
noscroll.rows[0].cells[i].width = parseInt(noscroll.rows[0].cells[i].width) + parseInt(restwidth); // Expand last cell over possible scrollbar
return;
};
</script>
<style type="text/css">
body {
text-align: left;
}
table{
width: 100%;
border: 0;
border-spacing: 0;
padding: 0;
clear: both;
}
table th{
background-color:#456789;
display: inline-block;
float: left;
padding: 0;
}
table td{
background-color:#999;
}
</style>
</head><body>
<h1>Pretty Table with pure JavaScript</h1>
<p>Just put an empty table above and name the id with praefix 'noscroll-{mytable}' where {mytable} is the id of the table below.<br/><br/></p>
<div style="width:600px;">
<table id='noscroll-TestTable' >
<thead>
<tr></tr>
</thead>
</table>
</div>
<div style="width:600px; max-height: 300px; overflow: auto;">
<table id='TestTable' style='max-height: 180px; overflow-y: auto;'>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
JSFiddle: https://jsfiddle.net/Mac65/mf494nuw/34/

Can someone explain why I cant put br tags inside a table

The line break appears above the the table, not were I would normally expect it to be. I'm just wondering why this is.
<table>
<tr>
<th>cell group 1</th><!--<br> this wouldnt work-->
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<th>cell group 2</th>
<td>cell 5</td>
<td>cell 5</td>
<td>cell 6</td>
<td>cell 7</td>
</tr>
<tr>
<th>cell group 3</th>
<td>cell 8</td>
<td>cell 9</td>
<td>cell 10</td>
<td>cell 11</td>
</tr>
</table>

You cannot put a <br> tag inside a table structure. But you can do it inside cell elements: <th> or <td>.
Example:
<table>
<tr>
<th>cell group 1<br></th>
<td>cell 1</td>
<td>cell 2<br></td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<th>cell group 2</th>
<td>cell 5</td>
<td>cell 5</td>
<td>cell 6</td>
<td>cell 7</td>
</tr>
<tr>
<th>cell group 3</th>
<td>cell 8</td>
<td>cell 9</td>
<td>cell 10</td>
<td>cell 11</td>
</tr>
</table>

The visual content of a table can only exist inside table data cell tags (td or th) - putting elements in between these makes no logical sense - where would it appear?
If you have some tabular data and want to put something between two data cells, then it just becomes another data cell, doesn't it.
If you want to adjust the visual appearance of some part of a table, it should be done with CSS margin or padding styles, not by adding line breaks (this applies in general - br should not be used to adjust the size of elements.)

HTML Table vertically rather than horizontally?

I've got this table, and in this table are 4 columns, like this:
Column1|Column2|Column3|Column4|
data 1 data 2 data 3 data 4
But how do I get it like this?
Column1| data 1
Column2| data 2
Column3| data 3
Column4| data 4
This is my code:
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</table>
Any ideas? Is it even possible?

Like this:
<table>
<tr>
<th>Column1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Column2</th>
<td>Data 2</td>
</tr>
<tr>
<th>Column3</th>
<td>Data 3</td>
</tr>
<tr>
<th>Column4</th>
<td>Data 4</td>
</tr>
</table>

You put the th in the table rows
<table>
<tbody>
<tr>
<th>Column 1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Column 2</th>
<td>Data 2</td>
</tr>
</tbody>
</table>

<table>
<tr>
<th>Column 1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Column 2</th>
<td>Data 2</td>
</tr>
<tr>
<th>Column 3</th>
<td>Data 3</td>
</tr>
<tr>
<th>Column 4</th>
<td>Data 4</td>
</tr>
</table>

Maybe scope attribute can help you?
<table>
<tr scope="row">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
</table>
Also here, you get another solution by CSS.

you can use below pattern But i'll suggest you to use css tables : Page layout, Divs instead of Tables
<table>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
</table>