I am trying to set the row heights in a table when the table height is 100%. I can accomplish this when the table height is unset but that brings the footer up with it which is not the desired effect as the footer should be at the bottom of the parent container.
The height of the rows should be set at 49px instead of dividing themselves evenly to fill the entire space.
Here is the html and css (to see the actual issue use the codesandbox.io link below):
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 100%;
}
table {
width: 100%;
height: 100%;
table-layout: fixed;
border-spacing: 0px;
}
thead {
height: 49px;
background: lightblue;
position: sticky;
top: 0;
}
thead>th {
height: 49px;
position: sticky;
top: 0;
background: lightblue;
border-bottom: solid;
}
tr {
height: 49px;
}
tr>td {
height: 49px;
border-bottom: solid;
}
tfoot {
background: lightblue;
}
tfoot>td {
height: 49px;
position: sticky;
bottom: 0;
background: lightblue;
}
<div class="parent">
<table>
<thead>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
<td>Row 1 Col 4</td>
<td>Row 1 Col 5</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
<td>Row 2 Col 4</td>
<td>Row 2 Col 5</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
<td>Row 3 Col 4</td>
<td>Row 3 Col 5</td>
</tr>
</tbody>
<tfoot>
<td colspan="5">I am the footer deal with it</td>
</tfoot>
</table>
</div>
https://codesandbox.io/s/gracious-matan-fklp03?file=/index.html
"The height of the rows should be set at 49px instead of dividing themselves evenly to fill the entire space."
Problems
<thead> and <tfoot> had no <tr> which is required otherwise HTML is invalid.
position: sticky, top: 0, and bottom: 0 were assigned to <td> and <th> See note 3️⃣.
<table> height is 100% of .parent ⟶ .parent height is 100% of <body> ⟶ <body> height is 100% of <html>. So <table> at 100% height means that it's height is going to vary according to the height of .parent. That's why the rows in <tbody> were 60px each.
Solutions
Added <tr> to <tfoot> and <thead>
Assigned fixed height to .parent and <table> as well as overflow-y: scroll so <table> scrolls within the borders of .parent marked 2️⃣.
Added a CSS ruleset that resets dimension properties for everything marked 1️⃣
There's 3 CSS rulesets that are added for sticky <thead> and <tfoot> marked 3️⃣.
All <tr> are 49px marked 4️⃣ See Figure I
Figure I
Note: 7 extra rows were added to demonstrate the "sticky" functionality.
Plunker❉CodePenFiddle
❉Click the green "Preview" button
* {
/* 1️⃣ */
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.parent {
/* 2️⃣ */
max-height: 245px;
overflow-y: scroll;
}
table {
/* 2️⃣ */
max-height: 245px;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0px;
}
thead,
tfoot {
/* 3️⃣ */
position: sticky;
background: lightblue;
}
thead {
/* 3️⃣ */
top: 0;
}
tfoot {
/* 3️⃣ */
bottom: 0;
}
tr {
/* 4️⃣ */
height: 49px;
}
th,
td {
border-bottom: solid 1px #000;
}
<section class='parent'>
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
<td>Row 1 Col 4</td>
<td>Row 1 Col 5</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
<td>Row 2 Col 4</td>
<td>Row 2 Col 5</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
<td>Row 3 Col 4</td>
<td>Row 3 Col 5</td>
</tr>
<tr>
<td>Row 4 Col 1</td>
<td>Row 4 Col 2</td>
<td>Row 4 Col 3</td>
<td>Row 4 Col 4</td>
<td>Row 4 Col 5</td>
</tr>
<tr>
<td>Row 5 Col 1</td>
<td>Row 5 Col 2</td>
<td>Row 5 Col 3</td>
<td>Row 5 Col 4</td>
<td>Row 5 Col 5</td>
</tr>
<tr>
<td>Row 6 Col 1</td>
<td>Row 6 Col 2</td>
<td>Row 6 Col 3</td>
<td>Row 6 Col 4</td>
<td>Row 6 Col 5</td>
</tr>
<tr>
<td>Row 7 Col 1</td>
<td>Row 7 Col 2</td>
<td>Row 7 Col 3</td>
<td>Row 7 Col 4</td>
<td>Row 7 Col 5</td>
</tr>
<tr>
<td>Row 8 Col 1</td>
<td>Row 8 Col 2</td>
<td>Row 8 Col 3</td>
<td>Row 8 Col 4</td>
<td>Row 8 Col 5</td>
</tr>
<tr>
<td>Row 9 Col 1</td>
<td>Row 9 Col 2</td>
<td>Row 9 Col 3</td>
<td>Row 9 Col 4</td>
<td>Row 9 Col 5</td>
</tr>
<tr>
<td>Row 10 Col 1</td>
<td>Row 10 Col 2</td>
<td>Row 10 Col 3</td>
<td>Row 10 Col 4</td>
<td>Row 10 Col 5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">I am the footer bow before my might!</td>
</tr>
</tfoot>
</table>
</section>
Related
I noticed that my table, in which i set a border-collapse:collapse and border-bottom: 1px solid grey, has a thicker line between the rows every 5th row. How can I get them to also be 1px?
I also noticed that I cannot set a border-radius. Why is that?
Here's my code:
.list table {
margin: 0 auto;
width: 95%;
border-collapse: collapse;
border: 2px solid black;
border-radius: 10px; //HAS NO EFFECT
}
.list th, .list td {
border-bottom: 1px solid grey;
padding: 10px;
}
No problem with thicker border-bottom for me here. So your problem most likely lies within your HTML which you did not share...
.list table {
margin: 0 auto;
width: 95%;
border-collapse: collapse;
border: 2px solid black;
border-radius: 10px; //HAS NO EFFECT
}
.list th, .list td {
border-bottom: 1px solid grey;
padding: 10px;
}
<div class="list">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 3</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>Row 2 Data 3</td>
</tr>
<tr>
<td>Row 3 Data 1</td>
<td>Row 3 Data 2</td>
<td>Row 3 Data 3</td>
</tr>
<tr>
<td>Row 4 Data 1</td>
<td>Row 4 Data 2</td>
<td>Row 4 Data 3</td>
</tr>
<tr>
<td>Row 5 Data 1</td>
<td>Row 5 Data 2</td>
<td>Row 5 Data 3</td>
</tr>
<tr>
<td>Row 6 Data 1</td>
<td>Row 6 Data 2</td>
<td>Row 6 Data 3</td>
</tr>
<tr>
<td>Row 7 Data 1</td>
<td>Row 7 Data 2</td>
<td>Row 7 Data 3</td>
</tr>
<tr>
<td>Row 8 Data 1</td>
<td>Row 8 Data 2</td>
<td>Row 8 Data 3</td>
</tr>
<tr>
<td>Row 9 Data 1</td>
<td>Row 9 Data 2</td>
<td>Row 9 Data 3</td>
</tr>
<tr>
<td>Row 10 Data 1</td>
<td>Row 10 Data 2</td>
<td>Row 10 Data 3</td>
</tr>
<tr>
<td>Row 11 Data 1</td>
<td>Row 11 Data 2</td>
<td>Row 11 Data 3</td>
</tr>
</table>
</div>
I have the following table below and I would like to add style to overflow-x in container.
I've tried, but doesn't work for me (Chrome):
.container::-webkit-scrollbar:horizontal {
width: 10px;
}
.container::-webkit-scrollbar-thumb:horizontal {
height: 20px;
background: hsla(0, 0%, 53.3%, .4);
}
AND
.container::-webkit-scrollbar {
width: 10px;
}
.container::-webkit-scrollbar-thumb {
height: 20px;
background: hsla(0, 0%, 53.3%, .4);
}
Fiddle
<div class="container">
<table>
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th>Column D</th>
<th>Column E</th>
<th>Column F</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
<td>Row 1 Cell 4</td>
<td>Row 1 Cell 5</td>
<td>Row 1 Cell 6</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
<td>Row 2 Cell 4</td>
<td>Row 2 Cell 5</td>
<td>Row 2 Cell 6</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
<td>Row 3 Cell 3</td>
<td>Row 3 Cell 4</td>
<td>Row 3 Cell 5</td>
<td>Row 3 Cell 6</td>
</tr>
</tbody>
</table>
</div>
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: .5em 1em;
}
run this and does it work for you?
<div class="container">
<table>
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th>Column D</th>
<th>Column E</th>
<th>Column F</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
<td>Row 1 Cell 4</td>
<td>Row 1 Cell 5</td>
<td>Row 1 Cell 6</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
<td>Row 2 Cell 4</td>
<td>Row 2 Cell 5</td>
<td>Row 2 Cell 6</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
<td>Row 3 Cell 3</td>
<td>Row 3 Cell 4</td>
<td>Row 3 Cell 5</td>
<td>Row 3 Cell 6</td>
</tr>
</tbody>
</table>
</div>
<style>
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: .5em 1em;
}
</style>
This question already has answers here:
Alternate table row color using CSS?
(11 answers)
Closed 6 years ago.
I have a table with class table. The only styling so far is the table th. I'd like to use a CSS value to alternate between white and silver for the rows, and hover silver for the entire row. Does anyone have the code for that?
<table class='table'>
<tr>
<th>heading</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
That is the html example (as it's written in php)
CSS
.table {
background-color: #FFFFFF;
color: #000000;
}
.table th {
background-color: #333333;
color: #FFFFFF;
}
That's it so far. Looking for the values to use for I'm guessing the table tr css.
Saying different because even/odd doesn't work & it's dynamic php not strict html.
If you've already set the background color of your table to white, you just need to set the alternate row and hover backgrounds, like so:
.table tr {
transition: background 0.2s ease-in;
}
.table tr:nth-child(odd) {
background: silver;
}
.table tr:hover {
background: silver;
cursor: pointer;
}
Additionally, you probably don't need to repeat the table class on each row, FWIW. You can just target those rows using .table tr as I have done. If you're trying to make sure the table header and body styles don't interfere with each other, it's more semantic and just cleaner to wrap those elements in a thead and tbody:
<table class='table'>
<thead>
<tr>
<th>heading</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</tbody>
</table>
You can achieve this with a little bit css, just use the n-th child selector, like this:
HTML:
<table class="alternate">
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
</table>
CSS:
.alternate tr:nth-child(2n) {
background-color: silver;
}
.alternate tr {
background-color: white;
}
.alternate tr:nth-child(2n):hover, .alternate tr:hover {
background-color: grey;
}
And here is a working fiddle, I hope that is what you were looking for.
How can I implement striped datarows in my table?
.dataTable tbody tr.odd{background-color:#000000}
.dataTable tbody tr.even{background-color:#ffffff}
That code doesnt work for me.
And if i use materialize the blade simply ruined.
Masters please help.
Blockquote
#if($cat!=null)
Audit Procedure
Work Done
#else
#endif
#if($cat!=null)
#foreach($dataArray as $val)
<tr class="dataTable">
<td class="complianceTD">{{$val[0]}}</td>
<td class="complianceTD_2">{{$val[1]}}</td>
<td class="complianceTD_3">{{$val[2]}}</td>
</tr>
#endforeach
#else
#foreach($dataArray as $val)
<tr>
<td class="complianceTD2"><div class="textContent">{{$val[0]}}</div></td>
</tr>
#endforeach
#endif
if you have :
<table>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
</table>
you can use :
table tr:nth-child(odd) td{ background-color:#000000; }
table tr:nth-child(even) td{ background-color:#ffffff; }
One approach could be to make use of the :nth-child().
Look at the code snipped, you have more possibilites on how to color your rows depending on the formula you use as parameter.
.dataTable tbody tr:nth-child(1n) {
background-color: #CCC;
}
.dataTable tbody tr:nth-child(2n) {
background-color: #777;
}
<table class="dataTable">
<thead>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
<th>header 5</th>
</thead>
<tbody>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
<td>Row 1, Col 4</td>
<td>Row 1, Col 5</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
<td>Row 2, Col 4</td>
<td>Row 2, Col 5</td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
<td>Row 3, Col 3</td>
<td>Row 3, Col 4</td>
<td>Row 3, Col 5</td>
</tr>
<tr>
<td>Row 4, Col 1</td>
<td>Row 4, Col 2</td>
<td>Row 4, Col 3</td>
<td>Row 4, Col 4</td>
<td>Row 4, Col 5</td>
</tr>
<tr>
<td>Row 5, Col 1</td>
<td>Row 5, Col 2</td>
<td>Row 5, Col 3</td>
<td>Row 5, Col 4</td>
<td>Row 5, Col 5</td>
</tr>
</tbody>
</table>
you can use:
tbody tr:nth-child(odd) {
background-color: green;
}
tbody tr:nth-child(even) {
background-color: red;
}
https://jsfiddle.net/L5tbhkew/
You should use td for table content, but also depends on your html on how you construct your table
.dataTable tbody td.odd {
background-color:#000000
}
.dataTable tbody td.even {
background-color:#ffffff
}
I would like to know how to create a rounded corners on a table head only?
Additional detail... I want to have a rouded head of the table the rest of the table is a rectangle just the first header row should have rounded corners.
The problem is, that you need to make the certain inner elements round.
So you have to make for the first th and the last th round to get the wished solution.
table th:first-child{
border-radius:10px 0 0 10px;
}
table th:last-child{
border-radius:0 10px 10px 0;
}
It would be easier to help you if we saw your code or at least the code that didn't work for you.
Anyway, this tutorial seems relevant to your question http://www.jeox.com/docs/manual/web/round_table_corners.html
EDIT: Or this one http://blog.jezmckean.com/css3-rounded-table-corners-no-images/
There are a number of options. It depends on what you really want to achieve visually.
But be sure that border-collapse is NOT set to collapse, because that will not work. For more information, see this mozilla link: https://developer.mozilla.org/en/CSS/border-radius
#uno,
#due th,
#tre th {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border: 1px solid black;
}
#tre td {
border: 1px solid black;
}
<table id="uno" border="0">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<br>
<table id="due" border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<br>
<table id="tre" border="0">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>