I have created a scrollable table that I want to use in jsfiddle but I cannot get the table cells to have a fixed height or max height. You will probably need to shrink your browser width to see what I am talking about when looking at my example here:
https://jsfiddle.net/trleithoff/jz62aenk/5/
table, tr td {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
max-height: 30px;
height: 30px;
}
tbody {
display: block;
height: 125px;
overflow: auto;
}
thead, tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
In the first table cell (row 1 column 1) there is too much text and the ellipsis is working but it is working per line and not the entire text block. Does anyone know how to force a fixed height on a table cell?
table-cells won't work with overflow: hidden. Just wrap content in table-cell in div with max-height and overflow: hidden
tbody tr td div{
max-height: 30px;
overflow: hidden;
}
Related
After reading many posts about having a fixed theader with a scrollabe tbody, most answers point to adjusting the tbody to display: block. However, display block makes my columns on the righter side have a skewed alignment the further right the column goes. I am dealing with dynamic data so sometimes my table is rendered with 16 columns, but sometimes it could be up to 25 columns. I want all the columns aligned properly, while maintaining a fixed thead with a scrollable tbody. Here is my CSS:
table {
overflow: hidden;
width: 100%;
height: 810px;
table-layout: fixed;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
thead,
tbody {
width: 100%;
}
tbody {
flex: 1;
overflow-y: scroll;
width: 100%;
}
th {
cursor: pointer;
}
th {
}
td {
display: flex;
justify-content: center;
}
td,
th {
padding: 0;
}
tr {
width: 100%;
display: flex;
}
tr th {
flex: 1;
}
tr td {
flex: 1;
}
Here is a small Codepen example: https://codepen.io/anon/pen/xMmqxK
The Codepen skew is less prominent than the skew on my website, so it's a bit hard to notice. Any help would be much appreciated. If I posted a screenshot you would be able to see the problem more, however, I cannot due to a corporate envrionment. Thanks again.
The main problem here is that the <th>s are text-align:center but the <td>s are text-align:left. This is why the skew increase when there is more space in each column.
Easiest solution is to remove padding-left: 10px from <tbody> (only included in your CopePen) and set <td>s to text-align: center.
If you need to have left-aligned <td>s then you can do the reverse and set your <th>s to text-align:left.
I am trying for a vertical scroll bar inside tbody with a fixed header. I tried solution provided in the link.
HTML table with 100% width, with vertical scroll inside tbody
table {
width: 100%;
border-spacing: 0;
}
thead, tbody, tr, th, td { display: block; }
thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
tr:after { /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 19%; /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}
It works fine if scroll bar appears.But if the rows are few and the scroll bar doesn't appear, then thead is not aligned with tbody. How can I fix the issue with css?
Once your tbody data move-out from assigned height, your y-axis get's activated.
tbody {
height: 50px;
display: inline-block;
width: 100%;
overflow-y:scroll;
}
That's because the CSS above reduces the width of the thead tr's width to 97% or (100% - the width of the scrollbar) to accomodate for the reduced width of the tbody because of the scrollbar in tbody only. If there is no scrollbar in tbody then the tbody remains fully 100% wide but the thead is still being narrowed.
You wish to fix is with the CSS, well the CSS cannot recognize the fact that there are not enough rows to for the scrollbar to show. You will be able to fix it using JavaScript though - just look in the answer you have cited, there are examples of using JavaScript to apply the width of the tbody columns to thead just at the beginning of the answer.
EDIT
Or force vertical scrollbar at all times, such that the width of the tbody doesn't change regardless of the row count:
tbody {
# ... other attributes
overflow-y: scroll;
}
taken from:
Force Vertical Scrollbar
Use tbody max-height:100px instead of height:100px
tbody {
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
I am trying to get a table with a fixed head so that the rest of the body is scrollable. The thing is I need it to be done with materializeCss Table .
I can achieve this, and I've done so, however every solution that does it makes the table columns with different chars be unaligned, check this image:
This one has the borders so you can see the problem:
This is the CSS that i'm using and produces said result(the scroll class is in the table):
.scroll {
border: 0;
border-collapse: collapse;
}
.scroll tr {
display: flex;
}
.scroll td {
flex: 1 auto;
}
.scroll thead tr:after {
overflow-y: scroll;
visibility: hidden;
height: 0;
}
.scroll thead th {
flex: 1 auto;
display: block;
}
.scroll tbody {
display: block;
overflow-y: auto;
height: calc(80vh - 100px);
}
My question: How to align the content by column WITH fixed head and materialize?
After some testing I figured it out, essentially if you use the same CSS as me, you only need to replace the flex: 1 auto; properties to flex: 1; (remove the auto and it aligns perfectly).
Furthermore, if you need the head to be perfectly aligned to the body (there will be a small offset due to the scrollbar, just add a padding-right property to thead tr{} that matches the scroll bar width)
I want a pure CSS solution with a fixed table header and same column width for <th> and <td> with different content. I have taken an example and modified it to get column with different content: http://jsfiddle.net/jd72op9n/4/
table tbody,table thead {
display: block; /* comment to get same column with*/
}
table tbody {
overflow: auto;
height: 100px;
}
It seems that I cannot have both:
If take http://jsfiddle.net/jd72op9n/4/ I get a fixed header but the columns for th and td are not the same.
If I remove "display: block", I get the correct column but not fixed header.
Do you have a solution to get both?
I guess the only way is to strictly specify the width of the cells like this:
table th, table td{
width: 80px;
}
tbody{
width: 100%;
margin-right: 20px;
}
Please try this fiddle
And if you want to change width to certain cell, for example the 4th with the long text, you can add this css rule:
th:nth-child(4), td:nth-child(4){
width: 120px;
}
http://jsfiddle.net/patelnirpendra/2bs886p0/
css :
table tbody,table thead {
display: block;
}
table{
border: 1px solid black;
table-layout: fixed;
}
th, td {
border: 1px solid black;
overflow: hidden;
width: 150px;
}
I have a very basic CSS question.
I have a div with fixed height and I have a table inside that div.
The content of the table will not fit in the div unless the div gets a scrollbar. The problem is now,
the content of the table is overflowing the div as its height is more than the height I set on the div.
This is what I have for the Div
display: inline-block;
float: left;
max-height: 200px;
Here is an example.
jsfiddle
How do I get the table to fit in the div and have a scrollbar? This is not specific to any browser. I tried both in Chrome and IE myself.
[edit] Quoting your request:
How do I get the table to fit in the div and have a scrollbar.
Add the following to .test (fiddle)
overflow-y:scroll;
Documentation for overflow-y
.test {
background-color: gray;
display: inline-block;
float: left;
max-height: 200px;
overflow-y: scroll;
}
.matrix td, .matrix th{
border: 0.1em solid #E2E2E2;
padding: 4px 2px;
min-width: 65px;
white-space: normal;
text-align: center;
}