We are using the responsive tables as described here: http://dbushell.com/demos/tables/rt_05-01-12.html .
It transposes the table by creating a vertical table with a fixed left column. The transposed header row,
however, is not wrapped on white space and unnecessarily widens the table.
For transposing, the trick is to use display: inline-block; on the table rows and
white-space: nowrap; on the table body.
Any solutions to enable wrapping in the header row?
JsFiddle link: http://jsfiddle.net/ckaodhz1/
Code for the above trick:
table thead { display: block; float: left; }
table tbody {
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap;
}
table thead tr { display: block; }
table th { display: block; }
table tbody tr { display: inline-block; vertical-align: top; }
You can use <th> tag for all the headers.
Then you can use word-wrap: break-word; for the <th> tag.
You can use ellipsis. try this
.graham tr td:first-child{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width:50px;
}
Related
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;
}
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 have a table in which I have fixed headers and vertical scrolling on the tbody. However, the columns in this table can grow significantly and I'd like to add horizontal scrolling. At the moment when there are more than 3 columns, the table doesn't look right.
JS Fiddle with three columns (how it should look): https://jsfiddle.net/maxshuty/DTcHh/42626/
JS Fiddle with four columns (this should look like the three column fiddle): https://jsfiddle.net/DTcHh/67311/
I believe the problematic class is header-fixed. It has the following:
.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
Which is stopping the rows from being overflown.
Please check out the link below:
Check the demo
I have removed float and added flexbox instead and added #Row1 styles to achieve overflow. I hope this helps.
.header-fixed > thead > tr > th {
width: auto;
min-width: 20%;
float: left;
display: flex;
}
#Row1 {
overflow-x: scroll;
width: auto;
display: inline-flex;
}
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 would like to be able scroll td elements (except table side column) as screen size smaller than x size..
To be more clear please check: http://jsfiddle.net/uf32ojm5/7/
How can I scroll only comments fields and let "group" column fixed..
To fix "group" column I have done this:
#media only screen and (max-width: 590px) {
.groupColm{
position:fixed;
min-width:100px;
z-index:1;
}
}
But how do I scroll only comments fields?
Thank you in advance!
I Think you have to put the comments fields in an internal table inside the td and just enable scrolling in the size you need to the content of that td which contain the internal table at that time.
hope my answer help.
I solved it:)
div table { display: block; position: relative; width: 100%; }
div tbody { display: block; width:auto; position: relative; overflow-x: auto; white-
space: nowrap; }
div thead tr { display: block; }
div th { display: block; text-align:left; padding-left:10px; height:50px; line-
height:40px;}
div tbody tr { display: inline-block; vertical-align: top; }
div td {display: block; text-align: left; }
live: http://jsfiddle.net/uf32ojm5/12/