I need a solution when thead is fixed and tbody has scroll. I found such solution on SO, but I have a border-collapse:collapse problem with it. This is my html code:
<table>
<thead>
<tr>
<th></th>
<th>#</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>00000001</td>
<td>Name 1</td>
</tr>
<tr>
<td></td>
<td>00000001</td>
<td>Name 2</td>
</tr>
<tr>
<td></td>
<td>00000001</td>
<td>Name 3</td>
</tr>
</tbody>
</table>
This is css rules:
table {
display: table;
width: 100%;
border-collapse: collapse;
}
thead, tbody {
width: 100%;
}
thead {
overflow-y: scroll;
display: table;
table-layout: fixed;
width:calc(100% - 16px);
}
tbody {
overflow: scroll;
height: 150px;
display: block;
}
tr {
width: 100%;
text-align: left;
display: table;
table-layout: fixed;
}
th {
border:1px solid #cccccc;
border-collapse: collapse;
}
td {
border:1px solid #cccccc;
border-collapse: collapse;
}
This is fiddle.
As you see the borders between rows are 2 px, but must be 1 px. What is my mistake?
try to add this , so you dont have to change your styles : border-top:0;
td {
border:1px solid #cccccc;
border-top:0;
border-collapse: collapse;
}
Related
How can I use overflow: auto and at the same time not cut off the right border of the table when the viewport is enough to fit the table.
I want to stay auto, because if there are more than 5 columns I will need it to scroll on the right. The question is why when the width is enough, the right border gets cut off?
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
border-spacing: 0px;
}
tr {
height: 78px;
}
thead {
color: #92a1a6;
}
thead th {
width: 264px;
}
thead td {
width: 128px;
}
tbody {
border: 1px solid black;
}
tbody th {
width: 264px;
}
tbody td {
width: 128px;
}
tbody tr,
tbody th,
tbody td {
border: 1px solid black;
}
.scroll-holder {
display: block;
overflow-x: auto;
white-space: nowrap;
}
<div class="scroll-holder">
<table>
<thead>
<tr>
<th>First</th>
<td>1.25</td>
<td>2</td>
</tr>
</thead>
<tbody>
<tr>
<th>Title here</th>
<td>1250</td>
<td>1250</td>
</tr>
</tbody>
</table>
</div>
This seems to be because of a discrepancy between the thead (which doesn't have a border) and the tbody (which does).
Try adding an equivalent transparent border to the thead:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
table{
border-collapse: collapse;
width: 100%;
table-layout: fixed;
border-spacing: 0px;
}
tr{
height: 78px;
}
thead{
color: #92a1a6;
}
thead th{
width: 264px;
}
thead td{
width: 128px;
}
tbody{
border: 1px solid black;
}
thead{
border: 1px solid transparent; /* <--- */
}
tbody th{
width: 264px;
}
tbody td{
width: 128px;
}
tbody tr, tbody th, tbody td{
border: 1px solid black;
}
.scroll-holder{
display: block;
overflow-x: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="scroll-holder">
<table>
<thead>
<tr>
<th>First</th>
<td>1.25</td>
<td>2</td>
</tr>
</thead>
<tbody>
<tr>
<th>Title here</th>
<td>1250</td>
<td>1250</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have 4 different tables in my div container. I have trouble fitting my last table on the page. In my last table there is only one table cell. The height on this td cell is set to 200px. I'm wondering if I can set page-break on my last table. Here is example of my table:
<table class="srTable">
<thead>
<tr>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr>
<td id="summary"></td>
</tr>
</tbody>
</table>
Here is my CSS:
table.srTable {
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
table.srTable th {
text-align: center;
border: 1px solid black;
background-color: #E0DBDD;
}
table.srTable td {
height: 180px;
text-align: left;
vertical-align: top;
}
#media print {
table.srTable { page-break-after:auto }
table.srTable tr { page-break-inside:avoid; page-break-after:auto }
table.srTable td { page-break-inside:avoid; page-break-after:auto }
}
If content in srTable can't fit on the page I would like to see entier table on the next page. Code above didn't work, table stayed on the first page and I couldn't see bottom border of my td cell.
You can use a much simpler solution. You only have to set page-break-inside: avoid; on the table.srTable. The other rules for <tr> or <td> aren't needed:
table.srTable {
margin: 5px 0;
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
table.srTable th {
text-align: center;
border: 1px solid black;
background-color: #E0DBDD;
}
table.srTable td {
height: 180px;
text-align: left;
vertical-align: top;
}
div {
height:98vh;
}
#media print {
table.srTable {
page-break-inside: avoid;
}
}
<div></div>
<table class="srTable">
<thead>
<tr>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr>
<td id="summary"></td>
</tr>
</tbody>
</table>
May I request some to help me with below HTML and CSS please? I'm trying to have the 2nd column's width 100% of its container. Below CSS is working but then I'm unable to adjust the first column's width.
.VendorInfo td,
.VendorInfo table {
border: 1px solid black;
border-collapse: collapse;
}
.VendorInfo td:nth-child(odd) {
width: 150px;
}
.VendorInfo td:nth-child(even) {
width: 100%;
}
<div class="VendorInfo">
<table>
<tr>
<td>
<label>Vendor ID</label>
</td>
<td><span>00005467</span>
</td>
</tr>
<tr>
<td>
<label>Vendor Name</label>
</td>
<td><span>Holiday Inn</span>
</td>
</tr>
<tr>
<td>
<label>Area Name</label>
</td>
<td><span>Andheri West</span>
</td>
</tr>
<tr>
<td>
<label>City Name</label>
</td>
<td><span>Mumbai</span>
</td>
</tr>
</table>
</div>
You can use calc like this width: calc(100% - 150px) just set width: 100% on your table
.VendorInfo td,
.VendorInfo table {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
.VendorInfo td:nth-child(odd) {
width: 150px;
}
.VendorInfo td:nth-child(even) {
width: calc(100% - 150px);
}
<div class="VendorInfo">
<table>
<tr>
<td><label>Vendor ID</label></td>
<td><span>00005467</span></td>
</tr>
<tr>
<td><label>Vendor Name</label></td>
<td><span>Holiday Inn</span></td>
</tr>
<tr>
<td><label>Area Name</label></td>
<td><span>Andheri West</span></td>
</tr>
<tr>
<td><label>City Name</label></td>
<td><span>Mumbai</span></td>
</tr>
</table>
</div>
You have to set table width to 100%, then you can set max-width to 100% for the second column.
.VendorInfo td, .VendorInfo table {
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
.VendorInfo td:nth-child(odd) {
width: 20%;
}
.VendorInfo td:nth-child(even) {
max-width: 100%;
}
First you should make the table width:100% then just remove the width of the second column . it will automatic fill the available space after 150px of the first column.
table{
width:100%;
}
.VendorInfo td, .VendorInfo table {
border: 1px solid black;
border-collapse: collapse;
}
.VendorInfo td:nth-child(odd) {
width: 150px;
}
Demo : https://jsfiddle.net/5bxu2wrn/
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;
}
}
}
}
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%;
}
}