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>
Related
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;
}
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>
I have a table with 3 columns.
Inside every column there is a table with 3 lines.
I want to make this second table like this:
first row is 80 px height
second row is 40 px height and has a black background.
third row has variable height
This table must be vertically aligned to top. It is not. It is vertically aligned to center. Meaning the internal table is at the vertical center of the cell of the outside table.
So, this is the code:
.tabelaTresLinhasInterna {
border: 0px;
table-layout: fixed;
font-size: 0.9em;
line-height: 1.5em;
text-align: center;
margin:0 auto auto auto;
}
.tabelaTresLinhasInterna tr {
padding: 0px;
margin: 0px;
word-wrap: break-word;
}
.tabelaTresLinhasInterna tr:nth-child(1) {
height:80px;
}
.tabelaTresLinhasInterna tr:nth-child(2) {
background-color: #000;
height:40px;
}
.tabelaTresLinhasInterna tr:nth-child(3) {
height:auto;
}
.tabelaTripla {
border: 0px;
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 20px;
font-size: 0.7em;
line-height: 1.3em;
background-color: #fafafa;
}
.tabelaTripla tr {
padding: 40px;
margin: 40px;
}
.tabelaTripla th, td{
border: 0px;
width: 33%;
}
.tabelaTripla td{
border: 0px;
width: 33%;
text-align: center;
vertical-align: middle;
word-wrap: break-word;
padding: 40px;
border: 1px solid #eaeaea;
border-radius: 20px;
background-color: #fdfdfd;
}
<table class="tabelaTripla">
<tr>
<td>
<table class="tabelaTresLinhasInterna">
<tr><td>INTERNAL TABLE LINE 1</td></tr>
<tr><td>INTERNAL TABLE LINE 2</td></tr>
<tr><td>INTERNAL TABLE LINE 3</td></tr>
</table>
</td>
<td>COLUMN 2</td>
<td>COLUMN 3</td>
</tr>
</table>
The internal table is ignoring the CSS...
Add vertical-align: top; to the outer table's td.
For the row heights, apply the height to the td instead of the tr, i.e. .tabelaTresLinhasInterna tr:nth-child(1) td { height:80px; }.
.tabelaTresLinhasInterna {
border: 0px;
table-layout: fixed;
font-size: 0.9em;
line-height: 1.5em;
text-align: center;
margin: 0 auto auto auto;
}
.tabelaTresLinhasInterna tr {
padding: 0px;
margin: 0px;
word-wrap: break-word;
}
.tabelaTresLinhasInterna tr:nth-child(1) td {
height: 80px;
}
.tabelaTresLinhasInterna tr:nth-child(2) td {
background-color: #000;
height: 40px;
}
.tabelaTripla {
border: 0px;
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 20px;
font-size: 0.7em;
line-height: 1.3em;
background-color: #fafafa;
}
.tabelaTripla tr {
padding: 40px;
margin: 40px;
}
.tabelaTripla th,
td {
border: 0px;
width: 33%;
}
.tabelaTripla td {
border: 0px;
width: 33%;
text-align: center;
vertical-align: top;
word-wrap: break-word;
padding: 40px;
border: 1px solid #eaeaea;
border-radius: 20px;
background-color: #fdfdfd;
}
<table class="tabelaTripla">
<tr>
<td>
<table class="tabelaTresLinhasInterna">
<tr>
<td>INTERNAL TABLE LINE 1</td>
</tr>
<tr>
<td>INTERNAL TABLE LINE 2</td>
</tr>
<tr>
<td>INTERNAL TABLE LINE 3</td>
</tr>
</table>
</td>
<td>COLUMN 2</td>
<td>COLUMN 3</td>
</tr>
</table>
The thing is that your styles for .tabelaTripla td are inherited by tds of the internal table.
So that:
minimal height of the first row is 80px, but inner content makes it bigger because of inherited padding: 40px
same reason for height. Background color applies but covers with background-color: #fdfdfd; from the rules mentioned above
it's all right here
same problem, vertical-align: middle; inherited from top-level td
Try to use more concrete and specific rules.
padding is forcing the height of the cells... yo have to change the td display property in something like "display:block" but other modifications are needed.
By setting the padding of the inner table to zero, the height of the cell dosn't have a "minimum height"
.tabelaTripla .tabelaTresLinhasInterna td {
padding:0px
}
My advice is to use a grid system and you will get this thing in a responsive way and especially with less effort.
.tabelaTresLinhasInterna {
border: 0px;
table-layout: fixed;
font-size: 0.9em;
line-height: 1.5em;
text-align: center;
margin:0 auto auto auto;
}
.tabelaTripla .tabelaTresLinhasInterna td {
padding:0px
}
.tabelaTresLinhasInterna tr {
padding: 0px;
margin: 0px;
word-wrap: break-word;
box-sizing:border-box;
}
.tabelaTresLinhasInterna tr:nth-child(1) {
height:80px;
}
.tabelaTresLinhasInterna tr:nth-child(2) {
background-color: #000;
height:40px;
}
.tabelaTresLinhasInterna tr:nth-child(3) {
height:auto;
}
.tabelaTripla {
border: 0px;
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 20px;
font-size: 0.7em;
line-height: 1.3em;
background-color: #fafafa;
}
.tabelaTripla tr {
padding: 40px;
margin: 40px;
}
.tabelaTripla th, td{
border: 0px;
width: 33%;
}
.tabelaTripla td{
border: 0px;
width: 33%;
text-align: center;
vertical-align: middle;
word-wrap: break-word;
padding: 40px;
border: 1px solid #eaeaea;
border-radius: 20px;
background-color: #fdfdfd;
}
<table class="tabelaTripla">
<tr>
<td>
<table class="tabelaTresLinhasInterna">
<tr><td>INTERNAL TABLE LINE 1</td></tr>
<tr><td>INTERNAL TABLE LINE 2</td></tr>
<tr><td>INTERNAL TABLE LINE 3</td></tr>
</table>
</td>
<td>COLUMN 2</td>
<td>COLUMN 3</td>
</tr>
</table>
I using position fixed to freeze first column in table. How to make it the first column layout(width and height) same as other column to looks like no different with other columns but with freeze status.
<div>
<table>
<tr>
<th class='td1'>h1</th>
<th>h2</th>
<th>h3</th>
</tr>
<tr>
<td class='td1'>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
<tr>
<td class='td1'>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
</table>
</div>
css:
table {
border-collapse: collapse;
border: 1px solid black;
width: 300px;
height: 300px;
}
tr,
td,
th {
border: 1px solid black;
text-align: center;
}
.td1 {
position: fixed;
margin-top: 10px;
margin-left: 10px;
}
div {
width: 200px;
height: 400px;
overflow: auto;
}
JSfiddle demo
Try the below -
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
width: 300px;
height: 100px;
}
td,
th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 200px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
margin-top: -1px;
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
}
<div>
<table>
<tr>
<th class="headcol">h1</th>
<td class="long">h2</td>
<td class="long">h3</td>
</tr>
<tr>
<th class="headcol">D1</th>
<td class="long">D2</td>
<td class="long">D3</td>
</tr>
<tr>
<th class="headcol">D1</th>
<td class="long">D2</td>
<td class="long">D3</td>
</tr>
</table>
</div>
Do you mean like this?
CSS:
table {
border-collapse: collapse;
border: 1px solid black;
width: 300px;
height: 300px;
}
tr,
td,
th {
border: 1px solid black;
text-align: center;
}
.td1 {
position: fixed;
width: 143px;
height: 96px;
margin-left: 5px;
}
div {
width: 200px;
height: 400px;
overflow: auto;
}
HTML:
<div>
<table>
<tr>
<th class='td1'>h1</th>
<th>h2</th>
<th>h3</th>
</tr>
<tr>
<td class='td1'>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
<tr>
<td class='td1'>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
</table>
</div>
I'm trying to create a table where a fluid column has a min width.
All other columns have a fixed width, and should not grow wider or thinner.
I can get the fluid column to grow and shrink correctly, so that it takes up the remaining space in container which sets the max width to 900px, however I can't get it to take a minimum width.
This means when the window and container are squashed, the fluid column gets covered, rather than behave like the fixed columns at this point.
Applying a min-width to the th and/or td doesn't do anything.
Applying a min-wdith to the div inside the fluid td does mean the text has a minimum width, however it doesn't stop the column from shrinking to less than this minimum, so the text is underneath the next column's text.
Any ideas?
HTML:
<div class="container">
<table>
<thead>
<tr>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fluid">fluid</th>
<th class="fixed">fixed</th>
</tr>
</thead>
<tbody>
<tr>
<td>fixed</td>
<td>fixed</td>
<td>fixed</td>
<td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td>
<td>fixed</td>
</tr>
</tbody>
</table>
</div>
CSS:
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
table th, table td {
border-top: 1px solid #333;
}
JSfiddle:
http://jsfiddle.net/ajcfrz1g/14/
DEMO
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
min-width: 500px;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: 100%;
min-width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
width: 100%;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
}
table th, table td {
border-top: 1px solid #333;
}
i am trying to solve your problem. in this your fluidhas no min-width because this is table structure. but you can give width.
see this example
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: auto;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
white-space: nowrap;
overflow: hidden;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
}
table th, table td {
border-top: 1px solid #333;
}
<div class="container">
<table>
<thead>
<tr>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fluid">fluid</th>
<th class="fixed">fixed</th>
</tr>
</thead>
<tbody>
<tr>
<td>fixed</td>
<td>fixed</td>
<td>fixed</td>
<td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td>
<td>fixed</td>
</tr>
</tbody>
</table>
</div>