Table with fixed thead inside of position:absolute block - html

I have a HTML table wrapped by a block with position:absolute. I want to make the first row (with a th or td, or wrapped by thead) fixed at the top, and other table should be scrollable, without fixed height.
I've tried this, but inside of position:absolute it didn't work:
https://jsfiddle.net/dPixie/byB9d/3/light/
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>

Related

CSS Highlight Table Row But Not When Hovering First 3 Cells

I would like to highlight a row (change the background color) when i hover over any cell excluding the first 3 cells on the row (button cells). I also need to exclude the first row from the grid as that is the header row. (Images show desired behavior)
I have tried using many different :hover css selectors. But i cant seem to find the combination that allows me to highlight the row when hovering over any cell except the first 3.
table tr:hover td {
background-color: #e6e600;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<th>Joe</th>
<th>37</th>
<th>Male</th>
</tr>
</table>
Thanks!!
The 4th, 5thth, and 6th
columns were all <th>, the cells that are in the <tbody> should be <td>, so that is corrected. Also, I added a <thead> to it as well and an extra <tr> to show that the highlight affects each <tr> separately.
In order to meet the following criteria:
no JavaScript
valid HTML and CSS only
the 4th, 5thth, and 6th <td> of any <tr> within the <tbody> should all be highlighted at once if any one of them is hovered over.
the 1st, 2nd, and 3rd <td> of any <tr> within the <tbody> should never trigger any effects when hovering over them.
A sub-table could be used to isolate the last 3 columns:
in the <tbody>, remove the last 2 <td> of each <tr>.
add colspan="3" to the last <td> of each <tr> within the <tbody>
add a <table> into each of those <td colspan="3">
add a <tr> into that <table>
add 3 <td> into that <tr>
Figure I - a sub-table
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Joe</td><td>37</td><td>Male</td></tr>
</table>
</td>
table {
table-layout: fixed;
border-collapse: collapse;
}
th {
width: 5%;
}
th:nth-of-type(4) {
width: 50%;
}
th:nth-of-type(5) {
width: 5%;
}
th:nth-of-type(6) {
width: 15%;
}
td {
border: 1px solid #000;
background: transparent;
text-align:center;
}
.col {
padding: 0;
border: 0;
outline: 1px solid #000;
outline-offset: 0;
}
.sub tr:hover td {
background: #fc0;
}
.sub {
table-layout: fixed;
border-collapse: collapse;
min-width: 100%;
padding: 0;
border: 0.5px solid #000;
}
.sub td {
padding: 5px;
border: 1px solid 0.5px;
text-align: left;
}
.sub td:first-of-type {
width: 70%;
border-left: 0;
}
.sub td:nth-of-type(2) {
width: 10%;
text-align: center;
}
.sub td:last-of-type {
width: 20%;
}
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td><button>A</button></td>
<td><button>B</button></td>
<td><button>C</button></td>
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Joe</td><td>37</td><td>Male</td></tr>
</table>
</td>
</tr>
<tr>
<td><button>A</button></td>
<td><button>B</button></td>
<td><button>C</button></td>
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Jill</td><td>37</td><td>Female</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
It is not fully possible without JS as CSS has no parent selector. A few browsers (Safari and Chrome Desktop) already included the :has()-selector but as said, it is not fully supported yet.
The closest thing you an do without scripting is to highlight all th in a row. That said, you can use the tr:hover selector to check for a hover on the entire row. This means the hover will also trigger if you hover the first 3 elements. The background-highlighting therefore will only be used on the th. To exclude the first row you can use the :not()-selector:
table tr:not(:nth-child(1)):hover th {
background-color: #e6e600;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<th>Joe</th>
<th>37</th>
<th>Male</th>
</tr>
</table>

Make a div fill up the entire width and height of a table cell with unspecified dimensions

table, th, td, div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
div {
writing-mode: vertical-rl;
background-color: #ddd;
border-color: #bbb;
}
<table>
<tr>
<td>one</td> <td>two</td> <td>three</td>
</tr>
<tr>
<td rowspan="2"> <div>four</div> </td>
<td>five</td> <td>six</td>
</tr>
<tr>
<td>seven</td> <td>eight</td>
</tr>
</table>
The desired result is for the div in the table cell to look more like
this:
Notice the "four" div fills the entire width and height of the table cell in the image but not in the code snippet.
There are questions similar to this that suggest using absolute positioning which doesn't work in this exact situation ( per my attempts ) on a table with unspecified width and height. Other answers say there is no way to do this without JavaScript. But those answers were from 2010. Any input would be much appreciated.
if you are okay with a few classes then you can achieve what you shown in the image.
table,
th,
td,
div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
.spl {
writing-mode: vertical-rl;
border-style: none;
}
.inb {
background-color: #ddd;
}
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td rowspan="2" class="inb">
<div class="spl">four</div>
</td>
<td>five</td>
<td>six</td>
</tr>
<tr>
<td>seven</td>
<td>eight</td>
</tr>
</table>
You could use jQuery as follows to get the (outer) width and height of that parent td and apply it to that div
$(document).ready(function() {
var cellwidth1 = $('.x1').outerWidth();
var cellheight1 = $('.x1').outerHeight();
$('.x2').css({
'height': cellheight1,
'width': cellwidth1
});
});
* {
box-sizing: border-box;
}
table, th, td, div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
td.x1 {
padding: 0;
}
div.x2 {
writing-mode: vertical-rl;
background-color: #ddd;
border-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td> <td>two</td> <td>three</td>
</tr>
<tr>
<td class="x1" rowspan="2"> <div class="x2" >four</div> </td>
<td>five</td> <td>six</td>
</tr>
<tr>
<td>seven</td> <td>eight</td>
</tr>
</table>
After trying many things it seems that as of 2020 stretching a div to fill all the available space of a table cell without JavaScript is not possible unless you use absolute/relative positioning.
The downside with absolute positioning is that the cell does not expand with the content inside it and even not expanded the table cell seems to break on mobile ( tested with an iphoneXS on IOS14 )
dev-sbx.github.io/x
The only real solution here seems to be using a CSS Grid layout opposed to an HTML table.

Give on different cells colors

How can I have different colors on each cell. What I did is only to make the whole red, just to the first 3 cells only yellow blue and red. How can it be this? I should refer to specific <td>? I see this question, but it wasn't exactly what I was searching.
body {
background: #000;
}
#wrap {
margin: 0 auto;
/* margin 0 auto will center that box in your document */
width: 780px;
/*size of your box*/
background: #000;
text-align: center;
/* everything will be written in that box will be centered horizontaly*/
}
td:hover {
background-color: #ff0000;
color: #000000;
}
<div id="wrap">
<table width="780">
<tr>
<td align="center">
<table border=1>
<tbody>
<!-- Results table headers -->
<tr>
<th>Messages Per Month</th>
<th>1 Month Pricing</th>
<th>3 Month Pricing</th>
<th>12 Month Pricing</th>
</tr>
<tr>
<td>500</td>
<td>$14.95/Month</td>
<td>$12.95/Month</td>
<td>$9.95/Month</td>
</tr>
<tr>
<td>1,000</td>
<td>$24.95/Month</td>
<td>$20.95/Month</td>
<td>$17.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$37.95/Month</td>
<td>$31.95/Month</td>
<td>$26.95/Month</td>
</tr>
<tr>
<td>2,000</td>
<td>$49.95/Month</td>
<td>$41.95/Month</td>
<td>$35.95/Month</td>
</tr>
<tr>
<td>2,500</td>
<td>$62.95/Month</td>
<td>$52.95/Month</td>
<td>$44.95/Month</td>
</tr>
<tr>
<td>5,000</td>
<td>$119.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>7,500</td>
<td>$179.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>10,000</td>
<td>$219.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
Try using nth-child on the elements, here is a quick reference to all kinds of selections.
td:nth-child(odd) {
color: green;
}
td:nth-child(even) {
color: red;
}
td {
border: 1px solid gray;
}
<table>
<tr>
<td>2,500</td>
<td>$62.95/Month</td>
<td>$41.95/Month</td>
<td>$35.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$52.95/Month</td>
<td>$31.95/Month</td>
<td>$25.95/Month</td>
</tr>
</table>
You can use nth-child css psuedoselectors:
td:nth-child(1) {
color: yellow;
background-color: #AAA;
}
td:nth-child(2) {
color: red;
}
td:nth-child(3) {
color: blue;
}
<table>
<tr>
<td>Yellow</td>
<td>Red</td>
<td>Blue</td>
<td>Normal</td>
</tr>
</table>
First let's create a simplify version of your table.
table tr td{
border:2px solid black;
width:70px;height:30px;
text-align: center;
}
table{
border-collapse: collapse;
}
table:hover tr td:nth-child(1){
background: yellow;
}
table:hover tr td:nth-child(2){
background:blue;
}
table:hover tr td:nth-child(3){
background:red;
}
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
</tr>
<tr>
<td>nine</td>
<td>ten</td>
<td>eleven</td>
<td>twelve</td>
</tr>
</table>
Let me give you a bit of an explanation.. the table:hover tr td:nth-child(1) part, first the table:hover part, when we hover to the whole table, we want to target all the tr, inside the table, then inside the tr, we want to only select the first td ":nth-child(1)" of every tr, so this will only select and change the background color of the one,five and nine td (which is the first column of the table) color to yellow if we hover the mouse to the whole body of the table.
PS: For me, I prepare to do this on JavaScript.

Fixed header with vertical scrollbar in html table

I want to keep header as fixed when vertical scrollbar moves, I followed the example at http://jsfiddle.net/dPixie/byB9d/3/light .
It's completely HTML and CSS, the problem here is when there are more than 6 headings the headings does not get wrapped, so the values in the headers are overlapping, because the style absolute/fixed is applied to header class to fit as a fixed. If I apply wrapper styles the absolute header not considering my styles due to fixed position. Is there a solution to this.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top: 100px;
left: 100px;
width: 800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width: 100%;
}
td + td {
border-left: 1px solid #eee;
}
td,
th {
border-bottom: 1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div {
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div {
border: none;
}
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>

Confused about an example of build a table with fixed header

Could anyone help me to point out which styles is the key to build this fixed header table? This is the only example I find out useful, but I can not figure out which are the most important styles make this happen.
Also I am curious why there needs to be a DIV and padding for th td to make this happen?
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>
<style>
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
</style>
Your question is a little vague. The code you posted doesn't have a fixed header in the since that they are using the position: fixed on an element. That code is basically a regular old table with data in it. The "tricky" part is the user creates a new header section that sits over the existing thead which is why you see the code like this
<th>
Table attribute name
<div>Table attribute name</div>
</th>
The "Table attibute name" text is being hidden with the th {color: transparent;} and the text in the div is showing in its place.
As for the div class="container"thats creating the scrollable container using:
.container {
overflow-y: auto;
height: 200px;
}
I believe the user is using the table and div combo just so they could have a header with scrollable data underneath and it would all be aligned properly.
If you want a real simplified version of this code without using tables you could use this:
HTML
<div class="wrap">
<div class="top">Title here</div>
<div class="scroll">
<div class="text">All your base are belong to us</div>
</div>
</div>
CSS
html, body{
margin:0;
padding:0;
height:100%;
}
.wrap {
margin: 0 auto;
width: 600px;
}
.top {
border: 1px solid red;
background: lightgray;
line-height: 50px;
text-align: center;
}
.scroll {
background: pink;
height: 200px;
overflow-y: auto;
}
.text {
height: 1000px;
}
Here is the JS.Fiddle if you want to play around with it. Hope that helps.