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>
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>
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>
Is it possible to put an HTML element in between a table header and table rows?
Something like the code I have in this plunker:
<table style="width:100%">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<div style="background-color: #848484; width: 100%; height:1px; margin:0px; padding: 0px;"></div>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
</table>
My current way of achieving this is putting the divider line div after the table and using position relative to place it in between the table elements. But if the height of the table header or body changes, my position relative line may not appear in between the header and body anymore.
What is the best way to insert this divider line so that it is always between the table header and body?
Thank you very much for your time. Let me know if you need more information or I am being unclear.
You don't need additional markup to put a line in your table. Just use CSS:
th {
border-bottom: 2px solid #848484;
}
table {
border-collapse: collapse; /* remove space between cells */
}
<table style="width:100%">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
</table>
I think a better way to do it is by using THEAD and TBODY and then write some css that does the same as your DIV
HTML
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
CSS
thead {border-bottom:1px solid #848484;}
Use border-bottom to add the separator, and use the :last-child selector to remove the separator for the last row.
jsFiddle
HTML
<table style="width:100%">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
</table>
CSS
tr {
display: block;
border-bottom: 11px solid grey;
}
tr:last-child {
border: none;
}
I would like to have a table with a scrollbar to the right.
I want to accomplish this without any plugins(jQuery) just with css.
The table header is supposed to stay fixed.
What do I need to do to get this working?
You have taken on a task that, if you succeed, will make you a hero. I tried this and the straightforward thing -- to position:fixed; the <thead> -- is impossible. I had to copy all of the <thead> into a new object. But when you do that, the horizontal spacing of the <th> elements all goes away so the headings don't line up with the <td>s anymore. I ended up doing something like this:
First of all, abandon ie6 and ie7. There's no hope for those guys.
Make two copies of the table, one where the body is invisible and the <thead> is visible, and the other where it's vice-versa.
Give z-index:1; to the table with the visible <thead>.
Give z-index:0; to the table with the visible <tbody>.
Deal with horizontal scrolling, but not until after you find that onScroll isn't an ie8 event (not to mention ie6), so that you have to take a setInterval break every tenth of a second or so just to handle scrolling the <thead> left and right in ie8.
This will give you a table body of infinite scroll in both axes, with a table head that scrolls in the x axis only. Pretty much works in FF, Chrome, and Safari. But is shaky in ie8. A real pita.
Good luck, and please write if you get this to work!
Only the Firefox and IE6-7 browsers support the built-in <tbody> scrolling:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Scrolling</title>
<style type="text/css">
div.content
{
border: #000000 1px solid;
height: 400px;
overflow-y: auto;
width: 800px;
}
.fixedHeader
{
white-space: nowrap;
}
.fixedHeader tr
{
height: auto;
position: relative;
}
.fixedHeader tr td
{
background-color: #778899;
border: #000000 1px solid;
text-align: center;
}
tbody.scrollContent
{
overflow-x: hidden;
overflow-y: auto;
height: 370px;
}
.scrollContent tr td
{
background-color: #C0C0C0;
border: #000000 1px solid;
padding-right: 22px;
vertical-align: top;
}
</style>
<!--[if IE]>
<style type=text/css>
div.content
{
overflow-x: hidden;
overflow-y: auto;
}
</style>
<![endif]-->
</head>
<body>
<div>
<div class="content">
<table cellspacing="0">
<thead class="fixedHeader">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. </td>
<td>Pages can be displayed either with or without tabs. </td>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Here is the solution,
Table fixed header and the content inside the table can be scrollable.
HTML Part
<div class="table_wrapper">
<div class="header">
<div class="head1">Left</div>
<div class="head2">Center</div>
<div class="head3">Right Column</div>
</div>
<div class="tbody">
<table>
<tbody><tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td></tr>
<tr><td class="td1">1</td><td>2</td><td class="td3">3</td></tr>
<tr><td class="td1">2</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">3</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
</tbody></table>
</div>
</div>
CSS Part
.table_wrapper {background:tomato;border:1px double olive;float:left;}
.tbody{height:80px;overflow-y:auto;width:400px;background:yellow;}
table{border-collapse:collapse; width:100%;}
td{border-right:1px solid red;border-bottom:1px solid red;padding:1px 5px;}
.td3{border-right-width:0;}
.header{ width:400px;background:DodgerBlue;border-bottom:1px solid red;}
.header div{padding:1px 5px;float:left;border-right:1px solid orange;}
.header .head3{float:none;border-right-width:0;}
.head3 span{padding-left:5px;}
.td1{width:100px;}
.td2{width:140px;}
.header .head1{width:100px;}
.header .head2{width:140px;}
This simple CSS should do the trick:
table.table-scroll-body {
position: relative;
height: 200px; }
table.table-scroll-body tbody {
position: absolute;
width: 100%;
max-height: 150px;
overflow: auto; }
And the HTML if you need it..
<table class="table-scroll-body">
<thead>
<th>Header 1</th>
<th>Header 2</th>
</thead>
<tbody>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
</tbody>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
table
{
width: 320px;
display: block;
border:solid black 1px;
}
thead
{
display: inline-block;
width: 100%;
height: 20px;
}
tbody
{
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}
th, td
{
width: 100px;
text-align:center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</tr>
</tbody>
</table>
</body>
</html>
branching off of astrandr's answer.. here is how I did it, using their example:
css:
.transactHistory table
{
width: 320px;
display: block;
}
.transactHistory thead
{
display: inline-block;
}
.transactHistory tbody
{
height: 133px;
display: inline-block;
width: 100%;
overflow: auto;
}
.transactHistory th
{
width: 100px;
text-align:center;
}
.transactHistory tr
{
width: 100px;
text-align:center;
}
.transactHistory td
{
width: 100px;
text-align:center;
}
Table:
<div class="transactHistory">
(..table code)
</div>
This works, took it right off my website:
#news_box {
overflow: scroll;
overflow-x: hidden;
}
EDIT:
I also just found this with a nice example:
http://www.imaputz.com/cssStuff/bigFourVersion.html
Here's another good article on it:
http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html