Table with fixed header - tbody overflows thead in my table - html

I am trying to have a fix header in my table and I managed halfway through. Indeed, I can scroll the content but the tbody overflow the thead. I found many questions on stackoverflow and I tried many of them but without success...
UPDATED
And with the margin-top, the tbody appears in the margin-top when I scroll
Here is my code:
.fixed-header {
overflow-x: hidden;
overflow-y: auto;
height: 250px;
}
table {
color: black;
max-height: 750px;
margin-top: 31px;
width: 100%;
}
thead {
background-color: #505d66;
}
th {
position: sticky;
top: 31px;
}
tbody {
background-color: grey;
}
tbody tr td {
padding-top: 10px;
padding-bottom: 10px;
}
<div class="fixed-header">
<table>
<thead>
<tr>
<th>COL</th>
</tr>
</thead>
<tbody>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
</tbody>
</table>
</div>


As #acesmndr said, just put the background color on the TH
.fixed-header {
margin-top: 30px;
overflow-x: hidden;
overflow-y: auto;
height: 250px;
}
table {
color: black;
max-height: 750px;
width: 100%;
}
thead {
background-color: #505d66;
}
th {
position: sticky;
top: 0px;
background-color: #505d66;
}
tbody {
background-color: grey;
}
tbody tr td {
padding-top: 10px;
padding-bottom: 10px;
}
<div class="fixed-header">
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>COL</th>
</tr>
</thead>
<tbody>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
<tr>
<td>ITEM</td>
</tr>
</tbody>
</table>
</div>

Related

How to make the last row of a table frozen?

I'm able to make the first row of an HTML table frozen similar to Freeze Panes in MS Word, but not sure how to do it for the last row in the table.
I have this code:
.myTable {
overflow-y: scroll;
height: 650px;
display: block;
}
.table-header-col {
position: sticky;
top: 0px;
background-color: #f5f6f8;
}
<table class="myTable">
<thead>
<tr style="height: 55px; margin: 0px;">
<th class="table-header-col"></th>
<th class="table-header-col">Description </th>
<th class="table-header-col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Bananas</td>
<td>2.00</td>
</tr>
<tr>
<td> </td>
<td>Apples</td>
<td>3.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
</tbody>
</table>
I only included two rows here for an example, but if I have 50 rows, the user will have to scroll to get to the last row which contains a total. Is it possible to make that row Freeze similar to the way I'm making the header row freeze above?

are you want something like this :)
.myTable {
overflow-y: scroll;
height: 650px;
display: block;
}
table tbody tr:last-child{
position: sticky;
top: 0;
background-color: #f5f6f8;
}
<table class="myTable">
<thead>
<tr style="height: 55px; margin: 0px;">
<th class="table-header-col"></th>
<th class="table-header-col">Description </th>
<th class="table-header-col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Bananas</td>
<td>2.00</td>
</tr>
<tr>
<td> </td>
<td>Apples</td>
<td>3.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
</tbody>
</table>

you can try this one.
worked for me:
table{
width: 400px;
position: relative;
background: transparent;
display: block;
padding-bottom: 42px;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
table ::-webkit-scrollbar {
width: 0px;
}
table > thead {
height: 30px;
text-align: end;
position: sticky;
top: 0;
display: table;
width: 100%;
background: green;
}
table > thead > tr{
height: 30px;
background-color: #009879;
color: #ffffff;
text-align: left;
}
table > thead > tr > th{
text-align: end;
}
table > tbody{
height: 200px;
display: block;
width: 100%;
overflow: auto;
background: pink;
}
table > tbody > tr{
height: 30px;
text-align: end;
display: table;
width: 100%;
}
table > thead > tr > th,
table > tbody > tr > td{
padding: 12px 15px;
}
table > tbody > tr{
border-bottom: 1px solid #dddddd;
}
table > tbody > tr:nth-of-type(even) {
background-color: #f3f3f3;
}
table > tbody > tr:last-of-type {
border-bottom: 2px solid #009879;
}
table > tbody > tr:last-child{
position: absolute;
bottom: 0;
}
<table>
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1.1</td>
<td>text1.2</td>
<td>text1.3</td>
</tr>
<tr>
<td>text2.1</td>
<td>text2.2</td>
<td>text2.3</td>
</tr>
<tr>
<td>text3.1</td>
<td>text3.2</td>
<td>text3.3</td>
</tr>
<tr>
<td>text4.1</td>
<td>text4.2</td>
<td>text4.3</td>
</tr>
<tr>
<td>text5.1</td>
<td>text5.2</td>
<td>text5.3</td>
</tr>
<tr>
<td>text6.1</td>
<td>text6.2</td>
<td>text6.3</td>
</tr>
<tr>
<td>text7.1</td>
<td>text7.2</td>
<td>text7.3</td>
</tr>
<tr>
<td>text8.1</td>
<td>text8.2</td>
<td>text8.3</td>
</tr>
<tr>
<td>text9 .1</td>
<td>text9 .2</td>
<td>text9 .3</td>
</tr>
</tbody>
</table>

How to make one table row expand outside width of the rest of the table?

I have a HTML table and the final row needs to expand the full width of the page, while the rest of the rows are centered with a margin on the left and right like so:
#mytable {
margin: auto;
width: 90%;
}
Is this possible?
#mytable {
margin: auto;
width: 90%;
}
#mytable th,
#mytable td {
padding: 0.8em;
border: 1px solid;
}
#mytable th {
background-color: #6699FF;
font-weight: bold;
}
#container {
background-color: red;
width: 100%;
height: 100%;
}
#last-row {
background-color: blue;
}
<div id="container">
<table id="mytable">
<tr>
<th>#</th>
<th>Columna</th>
<th>Relative</th>
<th>Isso</th>
</tr>
<tr>
<td>1</td>
<td>This</td>
<td>Column</td>
<td>Is</td>
</tr>
<tr>
<td>2</td>
<td>Column</td>
<td>two</td>
<td>this</td>
</tr>
<tr>
<td>3</td>
<td>is</td>
<td>not equals</td>
<td>a</td>
</tr>
<tr>
<td>4</td>
<td>the</td>
<td>Column</td>
<td>real</td>
</tr>
<tr id="last-row">
<td>5</td>
<td>first</td>
<td>One</td>
<td>Column</td>
</tr>
</table>
</div>
Here's a JSFiddle:
https://jsfiddle.net/zvjaep1q/

Use colspan to bridge columns.
#mytable {
margin: auto;
width: 90%;
}
#mytable th,
#mytable td {
padding: 0.8em;
border: 1px solid;
}
#mytable th {
background-color: #6699FF;
font-weight: bold;
}
#container {
background-color: red;
width: 100%;
height: 100%;
}
#last-row {
background-color: blue;
}
<div id="container">
<table id="mytable">
<tr>
<th>#</th>
<th>Columna</th>
<th>Relative</th>
<th>Isso</th>
</tr>
<tr>
<td>1</td>
<td>This</td>
<td>Column</td>
<td>Is</td>
</tr>
<tr>
<td>2</td>
<td>Column</td>
<td>two</td>
<td>this</td>
</tr>
<tr>
<td>3</td>
<td>is</td>
<td>not equals</td>
<td>a</td>
</tr>
<tr>
<td>4</td>
<td>the</td>
<td>Column</td>
<td>real</td>
</tr>
<tr id="last-row">
<td colspan="4">5
first
One
Column</td>
</tr>
</table>
</div>

How to add space between two rows with border in bootstrap table

table{ width: 100%;max-width: 100%; margin-bottom: 20px;border:solid 1px #000; border-collapse: collapse;}
tbody tr{border:2px solid #256ac4;}
td{ color: #8d9097; vertical-align: top; font-size: 14px;}
th{text-align:left}
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
</tbody>
</table>
i have coded this, expected result is in image but i am unable to add space between two rows, if i use border-collapse:seperate then space is coming but border is not applying.
https://ibb.co/b9WDn5

In the parent table, try setting
border-collapse:separate;
border-spacing:5em;
Try to refer this .

You should add a div where your content goes and style it to create the gap between rows.
So if we take the code from you example it will turn out like this.
HTML
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
</tr>
<tr>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
</tr>
<tr>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
</tr>
</tbody>
</table>
CSS
table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
td {
color: #8d9097;
vertical-align: top;
font-size: 14px;
padding: 0;
}
td div {
margin-bottom: 10px;
border: 2px solid #256ac4;
}
td:first-child div {
border-left-width: 2px;
}
td:last-child div {
border-right-width: 2px;
}
thead {
border: solid 1px #000;
}
th {
text-align: left
}
https://jsfiddle.net/nvbza1u3/1/
Note how the border was added to the div and not the tr. Also I added the border to thead to make it look more like your example

I have fix this issue with float:left , check with this snippet
* { box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; }
table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border: solid 1px #000;
border-collapse: collapse;
float:left;
}
thead {
float: left;
}
tbody tr {
border: 2px solid #256ac4;
float: left;
margin-bottom: 15px;
width: 100%;
}
td {
color: #8d9097;
vertical-align: top;
font-size: 14px;
}
th {
text-align: left
}
<body>
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
</tbody>
</table>

Weird distribution of columns in tables

I'm quite inexperienced in all of this, but here's my problem. The columns in my table are being distributed weirdly. I'm doing this using Squarespace (don't judge), but I can edit the CSS and insert costume code. For some reason the first column is taking up a lot more space than the rest.
Here's what I've done:
.mytable {
border: 0px solid #009688;
width: 100%;
background-color: white;
white-space: nowrap;
overflow-x: auto;
display: block;
th {
padding: 4px;
text-align: left;
height:50px;
color: #eeeeee;
background-color: #009688;
}
td {
padding: 5px;
vertical-align: top;
border:0px;
line-height: 1.5em;
width: 100%;
}
tr:nth-child(odd) {
background-color: #E0F2F1
}
tr:nth-child(even) {
background-color: #fcfcfc
}
tr:hover {
background-color: #1DE9B6
}
}
<table class="mytable">
<tr>
<th>Menge</th>
<th>Bezeichnung</th>
</tr>
<tr>
<td>100 g</td>
<td>Geräucherter Lachs</td>
</tr>
<tr>
<td>2 Stück</td>
<td>Avocados</td>
</tr>
<tr>
<td>2 EL</td>
<td>Zitronensaft</td>
</tr>
<tr>
<td>½ Stück</td>
<td>Salatgurke</td>
</tr>
<tr>
<td>4 Stück</td>
<td>Eier</td>
</tr>
<tr>
<td>2 EL</td>
<td>Sesam</td>
</tr>
<tr>
<td>500 g</td>
<td>Sushireis</td>
</tr>
<tr>
<td>1 EL</td>
<td>Zucker</td>
</tr>
<tr>
<td>1 EL</td>
<td>Salz</td>
</tr>
<tr>
<td>4 EL</td>
<td>Reisessig</td>
</tr>
<tr>
<td>10 Stück</td>
<td>Noriblätter</td>
</tr>
<tr>
<td>1 Stück</td>
<td>Bambusmatte</td>
</tr>
</table>
Any suggestions? I should also add that I want the tables to be as responsive as possible (that's why I started playing with the CSS). Thanks!

.mytable {
border: 0px solid #009688;
background-color: white;
white-space: nowrap;
overflow-x: auto;
table-layout: fixed;
max-width: 600px;
width: 100%;
}
th {
padding: 10px;
text-align: left;
height:50px;
color: #eeeeee;
background-color: #009688;
width: 50%;
}
td {
padding: 10px;
vertical-align: top;
border:0px;
line-height: 1.5em;
width: 50%;
}
tr:nth-child(odd) {
background-color: #E0F2F1
}
tr:nth-child(even) {
background-color: #fcfcfc
}
tr:hover {
background-color: #1DE9B6
}
<table class="mytable">
<tr>
<th>Menge</th>
<th>Bezeichnung</th>
</tr>
<tr>
<td>100 g</td>
<td>Geräucherter Lachs</td>
</tr>
<tr>
<td>2 Stück</td>
<td>Avocados</td>
</tr>
<tr>
<td>2 EL</td>
<td>Zitronensaft</td>
</tr>
<tr>
<td>½ Stück</td>
<td>Salatgurke</td>
</tr>
<tr>
<td>4 Stück</td>
<td>Eier</td>
</tr>
<tr>
<td>2 EL</td>
<td>Sesam</td>
</tr>
<tr>
<td>500 g</td>
<td>Sushireis</td>
</tr>
<tr>
<td>1 EL</td>
<td>Zucker</td>
</tr>
<tr>
<td>1 EL</td>
<td>Salz</td>
</tr>
<tr>
<td>4 EL</td>
<td>Reisessig</td>
</tr>
<tr>
<td>10 Stück</td>
<td>Noriblätter</td>
</tr>
<tr>
<td>1 Stück</td>
<td>Bambusmatte</td>
</tr>
</table>

Scrollable table contents html/css

I'm trying to make my table contents scrollable, I've had to create a table inside one of the table rows which means if the table has more than one row the contents isn't aligned with the correct heading as showing in the fiddle;
https://jsfiddle.net/f5ax5w2r/
thead.panel-heading {
background-color: #242a30;
border-color: #242a30;
border-bottom: 1px solid #242a30;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
cursor: move;
width: 100%;
}
thead.panel-heading tr th {
color: #ffffff;
font-weight: 500;
padding: 10px 40px !important;
text-align: left;
}
tbody.panel-content {
background-color: #f0f3f4;
}
tbody.panel-content tr td {
padding: 10px 20px !important;
text-align: left;
}
tbody div {
overflow-x: hidden;
overflow-y: scroll;
height: 300px;
}
<table>
<thead class="panel-heading">
<tr>
<th>Client</th>
<th>Client</th>
</tr>
</thead>
<tbody class="panel-content">
<tr>
<td>
<div class="scrollit">
<table>
<tr>
<td>Alex Best</td>
<td>Yahoo Answers</td>
</tr>
<tr>
<td>Andrew Smith</td>
<td>Monkey Tube</td>
</tr>
<tr>
<td>James Harris</td>
<td>Limewire</td>
</tr>
<tr>
<td>Mike Anderson</td>
<td>Twitter</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

The number of table cells do not match in each table row in your code. Adding the correct colspan value should do it.
thead.panel-heading {
background-color: #242a30;
border-color: #242a30;
border-bottom: 1px solid #242a30;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
cursor: move;
width: 100%;
}
thead.panel-heading tr th {
color: #ffffff;
font-weight: 500;
padding: 10px 40px !important;
text-align: left;
}
tbody.panel-content {
background-color: #f0f3f4;
}
tbody.panel-content tr td {
padding: 10px 20px !important;
text-align: left;
}
tbody div {
overflow-x: hidden;
overflow-y: scroll;
height: 300px;
}
<table>
<thead class="panel-heading">
<tr>
<th>Client</th>
<th>Client</th>
</tr>
</thead>
<tbody class="panel-content">
<tr>
<td colspan="2">
<div class="scrollit">
<table>
<tr>
<td>Alex Best</td>
<td>Yahoo Answers</td>
</tr>
<tr>
<td>Andrew Smith</td>
<td>Monkey Tube</td>
</tr>
<tr>
<td>James Harris</td>
<td>Limewire</td>
</tr>
<tr>
<td>Mike Anderson</td>
<td>Twitter</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

Try adding colspan="2" to the td which has table inside.
https://jsfiddle.net/f5ax5w2r/
<table>
<thead class="panel-heading">
<tr>
<th>Client</th>
<th>Client</th>
</tr>
</thead>
<tbody class="panel-content">
<tr>
<td colspan="2">
<div class="scrollit">
<table>
<tr>
<td>Alex Best</td>
<td>Yahoo Answers</td>
</tr>
<tr>
<td>Andrew Smith</td>
<td>Monkey Tube</td>
</tr>
<tr>
<td>James Harris</td>
<td>Limewire</td>
</tr>
<tr>
<td>Mike Anderson</td>
<td>Twitter</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>