I'm experiencing a weird behaviour when trying to absolute position a div element inside a table-cell. To realise absolute positioning, I use a wrapper div element with position:relative:
HTML
<table>
<colgroup>
<col width="200px"></col>
<col width="300px"></col>
</colgroup>
<thead>
<tr>
<th>Caption 1</th>
<th>Caption 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="wrapper"><div class="abs">abs</div></div></td>
<td>Content 2</td>
</tr>
</tbody>
</table>
CSS
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
th, td {
border-bottom: 1px solid black;
padding: 0;
margin: 0;
}
.wrapper {
background-color: green;
position: relative;
width: 100%;
border-top: 1px solid blue;
}
.abs {
position: absolute;
margin: 0px;
padding: 0px;
background-color: red;
}
FIDDLE
As you can see, there is a gap between the wrapper div and the top of the containing table-cell. This gap will vanish if I change the abs element to position:relative.
So where does this gap come from and how do I prevent it?
Since you take .abs out of the normal page flow, .wrapper no longer has any content, so it collapses on itself and all you see is the border along the top of it.
It is in the vertical-middle of the cell because middle is the default vertical-align style for td and ths.
This can be better demonstrated if we add a non-breaking space in the mix:
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
th, td {
border-bottom: 1px solid black;
padding: 0;
margin: 0;
}
.wrapper {
background-color: green;
position: relative;
width: 100%;
border-top: 1px solid blue;
}
.abs {
position: absolute;
top:0;
margin: 0px;
padding: 0px;
background-color: red;
}
<table>
<colgroup>
<col width="200px"></col>
<col width="300px"></col>
</colgroup>
<thead>
<tr>
<th>Caption 1</th>
<th>Caption 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="wrapper">
<div class="abs">abs</div>
</div>
</td>
<td>Content 2</td>
</tr>
</tbody>
</table>
You have to set dimensions to wrapper,
.wrapper {height: 30px;}
http://jsfiddle.net/b1j2gbn3/2/
Else, the .wrapper height is 0 and table cell has vertical-align: middle; by default, so the blue border is in the middle of the cell.
Related
I have a table where the user can set a marker on a specific line, the marker is a 5px border at the row's left border.
When I set the border at the first row the table is padded right by a few pixels, but if I set the border in another row and not the first, the table isn't padded.
<table>
<tbody>
<tr class='marked'><td>A</td><td>A</td><td>A</td></tr>
<tr><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
<table>
<tbody>
<tr><td>A</td><td>A</td><td>A</td></tr>
<tr class='marked'><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
Is this the expected behavior? If it is, how can I fix it? I tested on Firefox and Chrome and both of them behave the same way.
Fiddle: https://jsfiddle.net/2hwuq8ed/
Although I couldn't find any specific documentation to corroborate this, based on what I know of html tables, through practical experience (many hours of building html newsletter templates mostly), the first row can effect the positioning of any row which follows under unique situations such as these. This is due to the nature of tabular formats and could be considered expected behaviour.
Consider offsetting the deficit, created by applying the border property to the first row or cell, by declaring a transparent border of the same width for all cells which are not .marked, e.g:
tr:not(.marked) {
border-left: 5px solid transparent;
}
Updated JSFiddle
table {
border-collapse: collapse;
}
tr {
background-color: blue;
}
tr:nth-child(odd) {
background-color: grey;
}
tr.marked {
border-left: 5px solid green;
}
tr:not(.marked) {
border-left: 5px solid transparent;
}
td:first-child {
width: 100px;
}
td {
width: 50px;
}
<table>
<tbody>
<tr class='marked'><td>A</td><td>A</td><td>A</td></tr>
<tr><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
<br>
<table>
<tbody>
<tr><td>A</td><td>A</td><td>A</td></tr>
<tr class='marked'><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
If you need to rid tables of that preceding whitespace altogether, consider applying the visual marker to a pseudo-element of the first nested table cell instead, e.g:
tr.marked td:first-child:before {
content: "";
position: absolute;
left: -3px;
top: 0;
bottom: 0;
background: green;
width: 5px;
}
Updated JSFiddle
table {
border-collapse: collapse;
}
tr {
background-color: blue;
}
tr:nth-child(odd) {
background-color: grey;
}
tr.marked td:first-child:before { /* additional */
content: "";
position: absolute;
left: -3px;
top: 0;
bottom: 0;
background: green;
width: 5px;
}
td:first-child {
width: 100px;
position: relative; /* required for absolutely positioned pseudo-elements */
}
td {
width: 50px;
}
<table>
<tbody>
<tr class='marked'><td>A</td><td>A</td><td>A</td></tr>
<tr><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
<br>
<table>
<tbody>
<tr><td>A</td><td>A</td><td>A</td></tr>
<tr class='marked'><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
Remove border-collapse and add cellspacing="0" cellpadding="0"
td{
border:none
}
tr {
background-color: blue;
}
tr:nth-child(odd) {
background-color: grey;
}
tr.marked {
border-left: 5px solid green;
}
td:first-child {
width: 100px;
}
td {
width: 50px;
}
<table cellspacing="0" cellpadding="0">
<tbody>
<tr class='marked'><td>A</td><td>A</td><td>A</td></tr>
<tr><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr><td>A</td><td>A</td><td>A</td></tr>
<tr class='marked'><td>B</td><td>B</td><td>B</td></tr>
<tr><td>C</td><td>C</td><td>C</td></tr>
</tbody>
</table>
I want to have a fixed height header, table with full height/width, and then some divs below that, preferably using flexbox.
How do I do that without getting scroll bars, so that everything takes up the full page?
Here's my attempt: https://jsfiddle.net/1nyv4pqk/2/
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
.outter {
display: flex;
flex-direction: column;
height: 100%;
background-color: red;
}
.header {
background-color: gray;
height: 3em;
}
.content {
height: 100%;
background-color: green;
}
.footerClass {
background: yellow;
height: 3em;
}
.tableClass {
margin: 10px;
height: 100%;
width: 100%;
border: 2px solid;
border-collapse: collapse;
border-spacing: 0;
}
.tableClass th,
.tableClass td {
border: 1px solid black;
}
<div class="outter">
<div class="header">This is a header</div>
<div class="content">
<table class="tableClass">
<thead>
<tr>
<th>COL 1</th>
<th>COL 2</th>
<th>COL 3</th>
<th>COL 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>This is some text in row 1</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>This is some text in row 2</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>This is some text in row 3</td>
<td>3,4,5</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>This is some text in row 4</td>
<td>2,6,7</td>
<td>2</td>
</tr>
</tbody>
</table>
<div>
Another Div
</div>
<div class="footerClass">
This is a footer
</div>
</div>
</div>
You have height: 100% on your containers.
But in your .outter container you have these children:
.header {
background-color: gray;
height: 3em;
}
.content {
height: 100%;
background-color: green;
}
Here's how this plays out:
3em + 100% = vertical overflow = vertical scrollbar
Compensate for the header height. Make this adjustment:
.content {
height: calc(100% - 3em);
background-color: green;
}
A similar height adjustment must be applied to the child of .content:
.tableClass {
margin: 10px;
height: calc(100% - 3em - 20px - 19.0909px); /* height, less footer height, less margin
heights, less "Another Div" height */
width: 100%;
border: 2px solid;
border-collapse: collapse;
border-spacing: 0;
}
In terms of the width, you have this:
.tableClass {
margin: 10px;
height: 100%;
width: 100%;
border: 2px solid;
border-collapse: collapse;
border-spacing: 0;
}
The margin is adding to the width: 100%, causing a horizontal scroll.
Compensate for the overflow with: width: calc(100% - 20px).
Also add * { box-sizing: border-border; }, so borders and padding are factored into width and height declarations.
Revised Fiddle
I have a table that needs to look like the attached image.
Notice the border under Name that does not extend the full length like the row highlight does. What I can't figure out is how to get the border to be short and the row background to extend to the edge of the containing div. Currently I'm applying padding to the first and last <td> cells to get the padding. My initial attempt was to apply the padding to the <tr> and apply the border to the <th>'s in the table head but it seems <tr>'s do not take padding even with border-collapse: collapse; set.
Here is an attached jsfiddle of the problem. The red border needs to be aligned with the td content.
https://jsfiddle.net/0vhqg4xe
Any ideas would be appreciated.
You can add a <span> tag around each text in <th>, and apply the border to it.
<th><span>Test 1</span></th>
<th><span>Test 2</span></th>
thead th span {
display: block;
border-bottom: 1px solid red;
}
.wrapper {
background: blue;
color: white;
padding-top: 10px;
padding-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
text-align: left;
border: 0;
}
tr {
border: 0;
}
thead th span {
display: block;
border-bottom: 1px solid red;
}
tr.highlight {
background: green;
}
tr > td:first-child,
th:first-child {
padding-left: 20px;
}
tr > td:last-child,
th:last-child {
padding-right: 20px;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th><span>Test 1</span>
</th>
<th><span>Test 2</span>
</th>
</tr>
</thead>
<tbody>
<tr class="highlight">
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
<td>Some Text</td>
</tr>
</tbody>
</table>
</div>
Or, use a pseudo element for the border, so you won't need to change the HTML.
thead tr th {
position: relative;
}
thead tr th:before {
content: "";
display: block;
height: 1px;
overflow: hidden;
background: red;
position: absolute;
left: 20px;
right: 0;
bottom: 0;
}
thead tr th:last-child:before {
left: 0;
right: 20px;
}
.wrapper {
background: blue;
color: white;
padding-top: 10px;
padding-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
text-align: left;
border: 0;
}
tr {
border: 0;
}
thead tr th {
position: relative;
}
thead tr th:before {
content: "";
display: block;
height: 1px;
overflow: hidden;
background: red;
position: absolute;
left: 20px;
right: 0;
bottom: 0;
}
thead tr th:last-child:before {
left: 0;
right: 20px;
}
tr.highlight {
background: green;
}
tr > td:first-child,
th:first-child {
padding-left: 20px;
}
tr > td:last-child,
th:last-child {
padding-right: 20px;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>Test 1</th>
<th>Test 2</th>
</tr>
</thead>
<tbody>
<tr class="highlight">
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
<td>Some Text</td>
</tr>
</tbody>
</table>
</div>
I've recently solved this problem, incase anybody comes across this post in the future, here it is.
Here is an image of the result ...
... here is the code ...
<style>
* {
font-family: sans-serif;
}
/* table wrapper for continuous border */
.table {
width: 500px;
border: solid 1px rgb(221,221,221);
border-radius: 4px;
overflow: hidden;
text-align: left;
}
/* table border */
.table table {
width: 100%;
border-collapse: collapse; /* removes gap between cells */
}
.table thead th {
font-weight: bold;
background-color: rgb(245,245,245);
border-bottom: solid 1px rgb(221, 221, 221);
}
/* cell padding */
.table th, td {
padding: 10px;
}
/* add row hover */
.table tr:hover td {
background-color: rgb(245,245,245);
}
/* create 1px gap in table for line */
.table tr.line-break td {
position: relative;
top: 1px;
}
/* create the line */
.table tr.line-break td:after {
content: '';
position: absolute;
top: -1px;
left: 0px;
height: 1px;
width: 100%;
background-color: rgb(235,235,235);
}
/* reduce width of line for first and last cells, by cell padding amount */
.table tr.line-break td:first-child:after,
.table tr.line-break td:last-child:after {
width: calc(100% - 10px);
}
/* pull line on first cell to the right */
.table tr.line-break td:first-child:after {
right: 0px;
left: auto;
}
</style>
<div class="table">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>Male</td>
<td>35</td>
</tr>
<tr class="line-break">
<td>Steve</td>
<td>Cook</td>
<td>Male</td>
<td>27</td>
</tr>
<tr>
<td>Susan</td>
<td>Walters</td>
<td>Female</td>
<td>34</td>
</tr>
</tbody>
</table>
</div>
... and here is a link of a CodePen I made for the working solution.
https://codepen.io/latchy/pen/wvwoxXe
The reason the table is wrapped inside a DIV is so that when I push the table row down 1px to allow for the height of the line, the border on the sides is not broken. It also makes it easy to apply a border radius to the table.
Hope this helps someone!
-- Latchy
.border-table .bordered {
position: relative;
background: red;
}
.border-table .bordered:before,
.border-table .bordered:after {
width: 90%;
left: 5%;
height: 1px;
background: blue;
content: '';
position: absolute;
}
.border-table .bordered:before {
top: 0;
}
.border-table .bordered:after {
bottom: 0;
}
<div class="wrapper border-table">
<table>
<thead>
<tr>
<th class="bordered">Test 1</th>
<th class="bordered">Test 2</th>
</tr>
</thead>
<tbody>
<tr class="highlight">
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
<td>Some Text</td>
</tr>
</tbody>
</table>
</div>
Just add an ::after pseudo element to the tr's and play around with the values (preferably in percentages) so you put the "simulated border" in the desired place.
The following code is just an example of what I've added on the image above (notice that last row can be excluded of having border with :last-of-type):
tbody {
tr {
position: relative;
&::after {
content: '';
position: absolute;
width: 95%;
height: 0.5px;
background-color: #d2d4e1;
left: 2.5%;
bottom: 0;
}
&:last-of-type {
&::after {
content: none;
}
}
}
}
This question already has answers here:
HTML table with 100% width, with vertical scroll inside tbody
(13 answers)
Closed 7 years ago.
I want to fix the first row and the scrollable body. When I like to fix with the css like this
thead
{
display: block;
width: 500px;
}
tbody
{
display: block;
width: 500px;
height: 200px;
overflow: auto !important;
}
But the headers are disaligned. the column and the rows are disaligned.
th,td
{
width:50px;
}
I really don't like to fix the <th> element with the 'width' property. I want that as flexible. Any idea for that flexible fixed header?
try to use in your style may help you
<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;
}
table {
border-spacing: 0;
width:100%;s
}
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>
in html
<section>
<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>
</tbody>
</table>
</div>
</section>
I have a table and when I set the table to a width of 100% and the table rows to a width pf 100% nothing happens or changes to the width.
.Table-Normal {
position: relative;
display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
}
.Table-Normal thead tr {
background-color: #E74C3C;
font-weight: bold;
}
.Table-Normal tr {
margin: 0;
padding: 0;
border: 0;
border: 1px solid #999;
width: 100%;
}
.Table-Normal tr td {
margin: 0;
padding: 4px 8px;
border: 0;
border: 1px solid #999;
}
.Table-Normal tbody tr:nth-child(2) {
background-color: #EEE;
}
<table id="top-leader" class="Table-Normal">
<thead>
<tr>
<td>Position</td>
<td>Name</td>
<td>Kills</td>
<td>Deaths</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>16 Kills</td>
<td>0 Deaths</td>
</tr>
<tr>
<td>2</td>
<td>John Smith</td>
<td>13 Kils</td>
<td>1 Death</td>
</tr>
<tr>
<td>3</td>
<td>Bob Smith</td>
<td>11 Kills</td>
<td>0 Deaths</td>
</tr>
</tbody>
</table>
Remove display: block in .Table-Normal
Fiddle
.Table-Normal {
position: relative;
//display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
}
By specifying display: block you've overriding the default value from the browser stylesheet for the table element: display: table. Removing display: block or replacing it with display: table fixes this.
As people have mentioned you have to remove display:block; for this to work. If you need to keep scrolling functionality wrap the table inside a div and set overflow rules on that
<div class = "table-container">
<table>...</table>
</div>
.table-container{
height:100px
width:100px
overflow-x:scroll;
table{
display: table;
width:100%;
}
}