This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
I need my html table's body to scroll and its head to stay put
I have a basic table:
<div>
<table>
<thead><tr><th>col 1</th><th>Col 2</th></tr></thead>
<tbody><tr><td>sweet</td><td>tooth</td></tr></tbody>
</table>
</div>
So I have 200 rows in the body section and want to make it so that when I scroll the thead section stays on top while everything else flows underneath it. Is there anyway to do this in CSS?
Following styles:
div {
max-height:400px;
overflow:auto;
}
I can't figure out how to do this. I tried to make the scroll part just tbody, but when I do that the max-height portion doesn't take effect for some odd reason. Also if I break it up into 2 tables then the columns won't be the correct widths. I also can't state what the widths are beforehand as the data changes rapidly so it needs to be able to be changeable.
Any ideas? I'm lost.
edit: Actually, this appears to break the connection between the header and the table, so the header columns don't line up. I'll leave this here though in case someone can get it to work.
How about this. The header is rendered position:absolute, so it won't move. But you have to explicitly position the table down to give it room.
.relative {
position:relative;
}
.table {
margin-top:18px;
max-height:400px;
overflow:auto;
}
thead {
position:absolute;
top: -18px;
}
<div class="relative">
<div class="table">
<table>
<thead><tr><th>col 1</th><th>Col 2</th></tr></thead>
<tbody>
<tr><td>sweet</td><td>tooth</td></tr>
</tbody>
</table>
</div>
</div>
Change 18px to be whatever the height of your thead should be.
Working sample: http://jsfiddle.net/EYjd5/1/
One of the possible methods is to create another table inside the main tbody, limit its height, and make sure you get scrollbars on overflow by using overflow: scroll;. Of course, for the columns to line up, you need to imitate the effect of the table header, I did that by inserting a hidden row identical to the header in the end of the new table (you should hide it using visibility: hidden; opacity: 0; not using display: none; otherwise this won't work). Here's a sample:
HTML:
<table>
<thead><tr><th>Name of show</th><th>Greatness</th></tr></thead>
<tbody><table class = "limitedcontent">
<tr><td>Glee</td><td>100%</td></tr>
<tr><td>Glee</td><td>100%</td></tr>
<tr><td>Glee</td><td>100%</td></tr>
<tr><td>Glee</td><td>100%</td></tr>
<tr><td>Glee</td><td>100%</td></tr>
<tr><td>Glee</td><td>100%</td></tr>
<tr><td>Glee</td><td>100%</td></tr>
<tr class = "placehold"><th>Name of show</th><th>Greatness</th></tr>
</table></tbody>
</table>
CSS:
.limitedcontent {
height: 150px; /*or whatever your limit is*/
overflow-y: scroll;
overflow-x: hidden;
display: inline-block;
}
.placehold {
visibility: hidden;
opacity: 0;
height: 0px;
overflow: hidden;
}
And a little demo: little link.
I hope that helped in any manner!
In case you're a jQuery-lover, you can use the DataTables jQuery plug-in to achieve exactly that.
Related
I know it should not be possible, but maybe there's some new quirk... Take a look:
https://jsfiddle.net/1hnxzyux/4/
So I'm using display:table, table-cell and table-row.
I was previously able to get a row to zero height if it doesn't contain anything or if it contains a display:none element, but on the fiddle you can see I've tried to hide the first row/cell by setting height:0 and overflow:hidden on all the elements, including a .box inside the cell, and it really doesn't work.
Please especially test on Safari, because it has some more problems than Firefox and Chrome.
Any way to get rid of the height and hide contents?
EDIT 1: for now, I've found out that IF using a real html table and adding table-layout:fixed to it along with setting some width for it, as for the official specs (and some other posts here in SO) the overflow property does work.
Though, it seems it doesn't work/apply to, css-tables, and I need css-tables.
EDIT 2: Thanks to #zer00ne I updated the fiddle and found that it --would-- work by setting font-size:0 both to td and input field. Though, it's not what I'm currently looking for, since I have to animate the field position and must be fully functional itself. Anyway, these 2 edits can be helpful for other people.
After about one week of searching for a solution, the answer is:
no, it's still not possible. At least, it's not possible in a reliable and versatile way. It's only possible in ways that somewhat limit elements or future actions.
If one doesn't strictly need css-tables (like me in this specific case), you can successfully mimic the same behaviour in 2 ways:
use real tables, apply table-layout:fixed and a width to the table (doesn't matter the unit, can be percentage, for ex.). Than just height:0/oveflow:hidden as usual.
use flexbox. It's the css construct that, with the right rules applied, can better approximate the table behaviour.
Hope it helps
You shouldn't set height of a row. Just place div tag inside each td and put your content in div but not in td directly. The height of row will be equal to height of its content. Set height and overflow for div element and set 0 in top and bottom padding of td. And of course you can use transition for height of div.
$(function() {
$('button').on('click', toggleColumn);
});
function toggleColumn() {
$('div').toggleClass('rollup');
}
table {
border-collapse: collapse;
}
td {
padding-top: 0;
padding-bottom: 0;
border: 1px solid black;
}
div {
background-color: yellow;
height: 40px;
padding-top: 10px;
padding-bottom: 10px;
overflow: hidden;
transition: 2s all;
}
div.rollup {
height: 0;
padding-top: 0;
padding-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>toggle</button>
<table>
<tr>
<td><div>Column 1</div></td>
<td><div>Column 2</div></td>
<td><div>Column 3</div></td>
<td><div>Column 4</div></td>
</tr>
</table>
If you are simply out after making the first row "invisible", you should simply be able to use CSS's :first-of-type like such:
/* Hide the first occurance of the 'tr' class */
.tr:first-of-type {
display: none;
}
Other than that, I'm not sure why you wouldn't be able to do something like this, alternatively? (a bit like the method you had attempted):
HTML
<div class="tr hidden">
<div class="td">
My Content
</div>
</div>
CSS
.hidden {
display: none;
}
Last but not least, may I ask why you are creating a "handmade" table using div's, instead of HTML's designated table?
You can animate opening a table row with HTML tables using this css:
tr.info td {
transition: all 0.5s ease;
}
tr.info.hide td {
line-height: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
opacity: 0;
}
Remove the vertical padding which causes the apparent "minimum height" (thanks Andrey Shaforostov). Set opacity 0 to make the text appear as the row grows - smoother effect than using font-size. No need for inner div's - just add/remove the "hide" class on the table row.
I'm outputting a list of file names with total views (tally) beside them.
I'm trying to get the tally to overflow the file name.
..So with a file / tally list like:
ejs-2015-participants-list 125,000
koh-hammertown-pics 20
slaughterhouse-co-summer-run 100
..I'm trying to get the result of:
ejs-2015-participan...125,000
koh-hammertown-pics 20
slaughterhouse-co-summe...100
The HTML / CSS (html5 / css3) has a structure like:
<style>
.box {width:200px;}
.box span {float:left;}
.box div {float:right;}
</style>
<div class="box">
<span>ejs-2015-participants-list</span><div>125,000</div>
<span>koh-hammertown-pics</span><div>20</div>
<span>slaughterhouse-co-summer-run</span><div>100</div>
</div>
I'm not particular about the elements used other than 'box' is repeated so it needs to be a class. If the structure won't work or you'd rather use another selector in your example, feel free. The solution does need to validate and work in consortium compliant browsers (not worried about IE).
I've tried various inline and block level elements with various style including:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Nothings working though - any ideas?
Tables would make the left side the same length for all rows.
You can totally get the effect you're looking for using flexbox (and for broader browser support fall back to a table solution). The idea here is that the price is the full width of its text, say "$500", and the rest of the space is filled by the item name, which has the three rules text-oveflow, overflow, and white-space that you mentioned.
Codepen:
http://codepen.io/tholex/pen/wKQPEV
HTML:
<div class="item">
<div class="name">Delicious Bagels</div>
<div class="price">$500</div>
</div>
CSS:
.row {
display: flex;
}
.name {
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.price {}
So I used a table for this, since it helps with alignment of the data and is semantically correct. No need to mess with floats.
The trick is really in the CSS. Set a max width, text-overflow of ellipsis, and don't allow word break. The actual ellipsis trick doesn't need to be in a table - any block level element can handle it.
Here's the codepen: http://codepen.io/anon/pen/bVQYWJ
CSS
.table td {
text-align: right;
}
.table th {
text-align: left;
}
.table th {
display: inline-block;
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
HTML
<table class="table">
<tr>
<th>ejs-2015-participants-list</th>
<td>125,000</td>
</tr>
<tr>
<th>koh-hammertown-pics</th>
<td>20</td>
</tr>
<tr>
<th>slaughterhouse-co-summer-run</th>
<td>100</td>
</tr>
</table>
The simple answer is your .box is too small to contain the div so it drops down. One solution is to make it wider but you have other problems.
Your span is an inline element while the div is block level. I don't know why you do it that way but you should probably contain those two inside their own div so one doesn't overflow into the other.
<div class="box">
<div>
<span> stuff </span><div>125,000</div>
</div>
...
Though it seems to me you should turn the div with the number into a span also. Then everything is inline.
So I'm designing an org chart based on the table element and I have a problem. I'm using <hr> elements to create the connectors; however, I can't get the dead space inbetween elements to go away. I've spent the last hour trying to figure out how the hell to get it to work and I just can't seem to figure it out.
I've included a picture to show:
The other issue is more of a question I haven't really looked into but figured I'd ask anyway. How can I lock the height of my table items. I've locked the width just fine but I can't seem to lock the height to 70px.
And here is some choice code:
<table class="orgchart" cellspacing="0" cellpadding="0">
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td class="item">Director</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr class="divider"><td></td><td></td><td></td><td></td><td></td><td></td><td><hr width="1" size="20"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td class="item">Assistant to the Director</td><td></td><td class="item">Deputy Director</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
And the CSS:
.orgchart td {
width: 70px;
height: 70px;
text-align: center;
overflow: hidden;
white-space: no-wrap;
}
.divider td {
height: 20px;
}
.item {
border: 2px solid black;
}
And here is the CodePen: http://codepen.io/jacob_johnson/pen/GpEjmm?editors=110
There's a margin all the way around the <hr>. Remove the top and bottom margins from the <hr>. All browsers apply default styling to elements, though not always the same. As a result you will see reset and normalize stylesheets used to improve visual consistency and development pains.
Updated Codepen with CSS below added.
hr {
margin: 0 auto;
}
If I was doing this project I would find a simple grid framework to layout with DIVs or more than likely I would create this chart as an inline SVG.
I have bunch of inline div's, followed by a block div. Inside block div, there should be table, something like that:
<div class="myInlineDiv"></div>
<div class="myInlineDiv"></div>
<div class="myBlockDiv">
<table>
...
</table>
</div>
Problem is: table is misaligned in FireFox. It works well in Chrome and IE.
Here is fiddle: http://jsfiddle.net/zk9eD/2/ Red block should be in yellow area.
(I can fix position problem with position: inline; but it causes another problem with table width).
Add float:left; in table class
.table1 {
background-color: red;
width: 100%;
border: 0px;
float:left;
}
Check working demo - http://jsfiddle.net/zk9eD/5/
I have a problem in layout in my spring MVC application. In my app, table which is containing in div going out of it even I set a width parameter for this div. I tried many solutions which I googled but without success. Here is my jsp file, CSS file, and screen from my app. As you can see when text in table is long it's not break to new line (as I want).
CSS file:
th,td {
border-style: solid;
border-width: 5px;
border-color: #BCBCBC;
}
#all {
width: 500px;
}
#tablediv {
width: 400px;
float: left;
}
jsp file:
<body>
<h3>All your notes:</h3>
<c:if test="${!empty notes}"/>
<form method="post" action="manage_note">
<div id="all">
<div id="tablediv">
<table>
<tr>
<th class="widther">Note date</th>
<th>Description</th>
</tr>
<c:forEach items="${notes}" var="note">
<tr>
<td class="widther">${note.date} ${note.time}</td>
<td >${note.description}</td>
<td><input type="radio" name="chosen_note" value="${note.note_id}"></td>
</tr>
</c:forEach>
</table>
</div>
<div id="addbutton">
<input name="add_note" type="submit" value="Add note"/>
</div>
</div>
<div id="restbuttons">
<input name="edit_note" type="submit" value="Edit"/>
<input name="delete_note" type="submit" value="Delete"/>
</div>
</form>
</body>
And here is screen:
http://imageshack.us/photo/my-images/203/tableproblem.png/
You'll need to do two things to prevent the table from becoming too large.
1) Set the table-layout to fixed:
table {
table-layout: fixed;
width: 100%;
}
2) Set word-wrap to break-word for td/th
th,td {
border-style: solid;
border-width: 5px;
border-color: #BCBCBC;
word-wrap: break-word;
}
You can see a working example here: http://jsfiddle.net/d6WL8/
I got a simple solution, hope it may help somebody someday.
Any table which is flowing out of its container, just encapsulate it with a div tag with style="overflow:auto"
<div style="overflow:auto">
<table>
.
.
.
</table>
</div>
The answer by hoooman is correct but maybe you mean something else. You can use overflow:auto on that table and also specify a width and it will create scroll bars if the content goes outside of the table.
There is also overflow-x and overflow-y to specify which axis.
If it is long strings of text, like a URL, you can use:
word-wrap: break-word;
this will break the text "wrapped" at the end of the column instead of like break-word which doesn't work out of the box without spaces (e.g long url's)
and add:
overflow-y:hidden;
this will prevent the overflowing text from overlapping the next row
That is because you have 1 word that is about 100 character long, try putting a space in the middle of that and it should fix itself.
set max-width along with word-wrap
Some times adding a Table inside a Div it happens.
In my case i had given padding-right:0px for the <div>
I was also facing this issue , added this class in css and fixed
table {
margin-left:0
}
This is an old question, but I have a simpler method.
Just add this:
th, td {
word-break: break-word; /*or you can use word-break:break-all*/
min-width: 50px; /*set min-width as needed*/
}
the min-width for th or td will not work if your table already set to table-layout:fixed. Just delete it.
or add this if you cannot find old css for table-layout
table {
table-layout:unset !important;
}
make sure you give an additional class / id before the table if you want the code to work only on the page you want.
Example:
.entry-content table {
table-layout: unset !important;
}
.entry-content th, .entry-content td {
word-break: break-word;
min-width: 50px;
}
Hope it can help all of you. Good luck!
Some of the cell values which are part of the table go out of the table.
After trying multiple options given above, reducing the table width to 90% solved the issue.
table {
border-collapse: collapse;
width: 90%;
}