Move Thead section as first column - html

Consider the following html
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1.1</td>
<td>data 1.2</td>
<td>data 1.3</td>
</tr>
<tr>
<td>data 2.1</td>
<td>data 2.2</td>
<td>data 2.3</td>
</tr>
</tbody>
It renders as the following image:
Is it possible by only using css to have the previous html render like the following image? (please note the indexes)


If you have to do this with css and you can't change your HTML you can do it with Flexbox.
table {
display: flex;
}
thead tr, tbody tr {
display: inline-flex;
flex-direction: column;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1.1</td>
<td>data 1.2</td>
<td>data 1.3</td>
</tr>
<tr>
<td>data 2.1</td>
<td>data 2.2</td>
<td>data 2.3</td>
</tr>
</tbody>

Related

Change background color of entire row in HTML table

I have a dynamic table which data's are coming from an API. I'm generating the table and inserting rows using JavaScript.
Everything is working properly but the problem is in styling.
My table row colors are stripped (just like we use bootstrap table-striped class) and cells are not same in every row.
Some has 3, some has 6, some 4 etc. Where cells are less they are showing some blank space.
Is there any way i can color the entire row. Here is an example. Here is an example of my code:
.table-striped th {
height: 45px;
background-color: #bfff00 !important;
color: #191919;
}
.table-striped td {
padding: 8px;
border: 2px solid #F6F6F6;
font-weight: bold;
}
.table-striped>tr:nth-child(n+1)>td {
background-color: #bababa;
}
.table-striped>tr:nth-child(n+2)>td {
background-color: #e8e7e6;
}
<div>
<table class="table-striped">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
</div>
Here is jsfiddle

The table row is only as wide as the number of cells.
Add a final cell when you don't have a full row and use colspan as appropriate.
.table-striped th {
height: 45px;
background-color: #bfff00 !important;
color: #191919;
}
.table-striped td {
padding: 8px;
border: 2px solid #F6F6F6;
font-weight: bold;
}
.table-striped tr:nth-child(odd) {
background-color: #bababa;
}
.table-striped tr:nth-child(even) {
background-color: #e8e7e6;
}
<div>
<table class="table-striped">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td colspan="5"></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td colspan="3"></td>
</tr>
</table>
</div>
Note from MDN that :
Any styles applied to the <tr> element will affect the cells within
the row unless overridden by styles applied to those cells.
Pay particular attention to the fact it styles the cells, not the row itself
EDIT
We know from your question and comments that you are using javascript to generate the table. We can't infer much on how you are doing this, but if you are generating the table row by row you should be able to see if you have generated the amount of cell for that row equal to the amount of th cells. If not, add a cell with the difference as a colspan. If you can't do this you can do it after the table is created.
This is a rough way of doing it
function addColspan(table) {
//Assume number of th are our max cells per row
var maxCells = table.querySelectorAll("th").length;
//Get all rows but the first
var rows = table.querySelectorAll("tr:nth-child(n+2)");
for(var i = 0; i < rows.length; i++){
//Get how many cells we have
var cellCount = rows[i].querySelectorAll("td").length;
//If we don't have enough cells
if(cellCount < maxCells) {
//Add one with the appropriate colspan
rows[i].innerHTML += "<td colspan='" + (maxCells - cellCount) + "'></td>";
}
}
}
//Run after table is generated
addColspan(document.querySelector(".table-striped"));
.table-striped th {
height: 45px;
background-color: #bfff00 !important;
color: #191919;
}
.table-striped td {
padding: 8px;
border: 2px solid #F6F6F6;
font-weight: bold;
}
.table-striped tr:nth-child(odd) {
background-color: #bababa;
}
.table-striped tr:nth-child(even) {
background-color: #e8e7e6;
}
<div>
<table class="table-striped">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
</div>

You can use even and odd properties in css.
Check this out
.table-striped th {
height: 45px;
background-color: #bfff00 !important;
color: #191919;
}
.table-striped td {
padding: 8px;
border: 2px solid #F6F6F6;
font-weight: bold;
}
.table-striped tr:nth-child(odd) td {
background-color: #bababa;
}
.table-striped tr:nth-child(even) td {
background-color: #e8e7e6;
}
<div>
<table class="table-striped">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
</div>
Updated answer after the comment. You need to have alteast empty in order to highlight the complete rows.
.table-striped th {
height: 45px;
background-color: #bfff00 !important;
color: #191919;
}
.table-striped td {
padding: 8px;
border: 2px solid #F6F6F6;
font-weight: bold;
}
.table-striped tr:nth-child(odd) td {
background-color: #bababa;
}
.table-striped tr:nth-child(even) td {
background-color: #e8e7e6;
}
<div>
<table class="table-striped">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

Need to design Horizontal tables

i need to design table which will have dynamic data with n number of rows
normal format of table header on top and rows at bottom ... i need header on left and rows on right as below explained
Currently my table looks like below
i want to design it as below
[![
<table style="border:1px solid; text-align:center;">
<thead>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
</tr>
</tbody>
<table>
]2]2

This should help you.
function swap( cells, x, y ){
if( x != y ){
var $cell1 = cells[y][x];
var $cell2 = cells[x][y];
$cell1.replaceWith( $cell2.clone() );
$cell2.replaceWith( $cell1.clone() );
}
}
var cells = [];
$('tbody').find('tr').each(function(){
var row = [];
$(this).find('td').each(function(){
row.push( $(this) );
});
cells.push( row );
});
for( var y = 0; y <= cells.length/2; y++ ){
for( var x = 0; x < cells[y].length; x++ ){
swap( cells, x, y );
}
}
thead {
float: left;
}
thead th {
display: block;
}
tbody {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
</tr>
</tbody>
<table>

You can use td and style the header part.
<style>
td.header {
font-weight: bold;
}
</style>
<table>
<tr>
<td class="header">Header 1</td><td>Data 1</td><td>Data 2</td><td>Data 3</td>
</tr>
</table>

Have table scrollable horizontally and accommodate few columns

I am trying to have a table which can have a range of columns, with this css below, I am able to get it scrollable horizontally with large number of columns:
.myTable {
overflow:auto;
display: block;
width: 100%
}
But with 2-3 columns for example, the table shows up in partial page (horizontally) - doesn't span. Changing display to "table" makes the table with large number of columns overflow horizontally (scrolling is gone).
Any ideas how both cases can work?

I believe you want to move this table into a wrapper that itself has overflow: scroll, like so:
.wrapper {
overflow: auto;
}
.myTable {
width: 100%;
text-align: center;
}
<div class="wrapper">
<table class="myTable">
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</table>
</div>
<div class="wrapper">
<table class="myTable">
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</table>
</div>

how to vertically align two tables with horizontal scroll at bottom

I would like to know how to vertically align two tables with horizontal scroll at bottom.
The following is the HTML code:
<div class="cntnr">
<div class="tabtwocntnr">
<table class="tabtwo">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 11</th>
<th>Header 12</th>
<th>Header 13</th>
<th>Header 14</th>
<th>Header 15</th>
<th>Header 16</th>
<th>Header 17</th>
<th>Header 18</th>
<th>Header 19</th>
<th>Header 20</th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 11</th>
<th>Header 12</th>
<th>Header 13</th>
<th>Header 14</th>
<th>Header 15</th>
<th>Header 16</th>
<th>Header 17</th>
<th>Header 18</th>
<th>Header 19</th>
<th>Header 20</th>
</tr>
</thead>
</table>
</div>
<div class="tabthreecntnr">
<table class="tabthree">
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td>Content 9</td>
<td>Content 10</td>
<td>Content 11</td>
<td>Content 12</td>
<td>Content 13</td>
<td>Content 14</td>
<td>Content 15</td>
<td>Content 16</td>
<td>Content 17</td>
<td>Content 18</td>
<td>Content 19</td>
<td>Content 20</td>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td>Content 9</td>
<td>Content 10</td>
<td>Content 11</td>
<td>Content 12</td>
<td>Content 13</td>
<td>Content 14</td>
<td>Content 15</td>
<td>Content 16</td>
<td>Content 17</td>
<td>Content 18</td>
<td>Content 19</td>
<td>Content 20</td>
</tr>
</tbody>
</table>
</div>
</div>
The corresponding css is:
.tabtwo,.tabthree{
border-collapse: collapse;
table-layout:fixed;
}
.tabtwo th, .tabthree td{
border-right: 1px solid black;
}
.tabthree td{
text-align: center;
border-top: 1px solid #000;
}
.tabtwocntnr,.tabthreecntnr{
width:100%;
}
.cntnr{
overflow-x:auto;
width: 100%;
border: 1px solid black;
}
The fiddle is :
http://jsfiddle.net/8H5Ek/
As we can see in this fiddle the two tables are not aligned properly(with respect to each other).There is also some white space at the right corner of the bottom table. I have tried resolving it by applying table-layout: fixed; to both the tables.
I am unable to achieve the desired result.
Please help me by contributing.

Without giving explicit widths, controlling tables can be very tricky.
See this fiddle: http://jsfiddle.net/8H5Ek/3/
Add these styles to your css:
table { width: 100%; }
th, td { width: 84px; }
You have to estimate the width of the td carefully.
Edit:
Here is another fiddle: http://jsfiddle.net/8H5Ek/12/
You can control the content length by using ellipsis. Moreover, you do not need those two inner divs (tabtwocntnr and tabthreecntnr). You can rid of them.
th, td {
width: 84px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
try changing width:100% to width:auto on the table css and then see how the content re-sizes the first header cell

for .tabtwo,.tabthree you have to set width:100%; and set the width for parent...add
html, body {
width:100%;/* added */
height:100%;/* added */
margin:0;/* added */
padding:0;/* added */
}
then you have to use colspan to fix the width of th
demo
EDIT
okay...solution was there in front of eyes...bit of your bad markup played foul....
thead and tbody is used for marking things in single table...you have used 2 different tables for it, that's why alignment issue is there..
delete this and you are done:
</table>
</div>
<div class="tabthreecntnr">
<table class="tabthree">
final demo

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>