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%;
}
Related
This question is already on stackoverflow. But the solutions are not working for me. Actually I'm working on an Angular project. I want to align Mode of comparison and the corresponding Dropdown in the middle with respect to each other. Here is the widget that I'm creating. I've clearly marked that part in the image:
Here is my HTML:
Note: pt-label, dls-combobox and dls-option are my custom made angular components.
<table>
<tbody>
<tr class="my-row">
<td class="first-col1">
<div class="comparing-switch1">
<pt-label>Mode of comparison </pt-label>
</div>
</td>
<td class="second-col1">
<div class="comparing-label1">
<dls-combobox placeholder="Time average">
<dls-option>
<pt-label>Time average</pt-label>
</dls-option>
</dls-combobox>
</div>
</td>
</tr>
</tbody>
</table>
and here is my CSS:
.my-row {
background: cornflowerblue;
}
.first-col1 {
background: magenta;
width: 50% !important;
}
.second-col1 {
width: 100%;
background: blueviolet;
padding-bottom: 10px;
}
table.stats tbody tr:nth-child(even) {
vertical-align: middle !important;
}
table.stats tbody tr {
vertical-align: middle !important
}
Even If I try to set it through margin and padding then both of them gets shifted even when the class names are different. One more thing I noticed. When I inspect the element table. When I remove vertical-align: baseline from these two places (as marked in the picture below) the my problem is solved:
What is wrong with my code. Please correct me.
Here vertical-align: baseline property is applied to the table. vertical-align: middle !important is applied for tr element.
since table has that property tr itself aligned in baseline. try adding vertical-align: middle for the table
I'm hoping this is fairly simple.
I want to keep table-layout:auto for the table, as this allows the "name" column to size gracefully, while the url column uses up the remaining space.
The problem is when the url column gets large, the table automatically sizes beyond the width.
Ideally I'd like to hide the overflow on the "url" column once it expands out beyond the size of the containing div.
In the Jsfiddle example you can see the first table sizing nicely, with the "name" column taking up the available space.
In the second table, it overruns its containing div, because of the text in the "url" column. I cant workout how to hide this overflow.
http://jsfiddle.net/RDG4T/
<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<style>
table {
table-layout:auto;
}
table, th, td
{
text-align:left;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
</head>
<div style="width:400px; border: 1px solid red; background-color:lightgrey;">
<table>
<thead>
<tr><th>Status</th><th style="width:100%">Name</th><th style="width:100%">Url</th></tr>
</thead>
<tbody>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred long long long name</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com/xxxxxx </td></tr>
</tbody>
</table>
</div>
</div>
<p/>
<div style="width:400px; border: 1px solid red; background-color:lightgrey;">
<table>
<thead>
<tr><th>Status</th><th style="width:100%">Name</th><th style="width:100%">Url</th></tr>
</thead>
<tbody>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred long long long name</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com/xxxxxxxxxxxxxxxxxxxxxxx</td></tr>
</tbody>
</table>
</div>
</body>
</html>
I used, It's only work set table-layout: fixed is this key to making it work.
word-wrap: break-word;
word-break: break-all;
table-layout: fixed;
check this jsFiddle help to you
Edit Updated
check this JsFiddle
Remove your inline style and now you css is
table {
table-layout:auto;
}
table, th, td
{
text-align:left;
word-break:break-all;
}
Your div wrapper is displaying the overflow. Add overflow hidden to it. FIDDLE
div{
overflow: hidden;
}
If you want to have an option to show the full url on hover you could try it this way:
Have a fiddle - Fiddle link!
HTML
<td>
<span>http://reallylongstring.com</span>
</td>
CSS
span {
width: 200px;
overflow: hidden;
display: block;
}
span:hover {
overflow: initial;
}
Since you're giving your div a fixed width, just add on overflow:hidden; to it's style and the overflow from the table won't show.
JSFiddle: http://jsfiddle.net/ginovva320/CFbKR/
HTML table ignoring element-style width
I have an HTML table where certain cells have very long text contents.
I want to specify a width (in pixels) for these cells using jQuery, but the rendered table just ignores the given width.
Is there any way to force the table to respect this width?
Thanks!
JSFiddle: http://jsfiddle.net/sangil/6hejy/35/
(If you inspect the cell you can see the the computed width is different than the element-style width)
HTML:
<div id="tblcont" class="tblcont">
<table id="pivot_table">
<tbody>
<tr>
<th id="h0" >product</th>
<th id="h1" >price</th>
<th id="h2" >change</th>
</tr>
<tr>
<!-- this is the cell causing trouble -->
<td id="c00" >Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td id="c01" >3212</td>
<td id="c02" >219</td>
</tr>
<tr>
<td id="c10" >Acer</td>
<td id="c11" >3821</td>
<td id="c12" >206</td>
</tr>
</tbody>
</table>
</div>
CSS:
.tblcont {
overflow: hidden;
width: 500px;
}
table {
table-layout: fixed;
border-collapse: collapse;
overflow-x: scroll;
border-spacing:0;
width: 100%;
}
th, td {
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
th {
height: 50px;
}
Javascript:
$(document).ready(function() {
// THIS LINE HAS NO EFFECT!
$('#c00').width(30);
});
I can see from your fiddle that you already have a good grasp on how to get the word truncation and such in-place. I think you may find it useful to do something like the following:
<table>
<colgroup>
<col style="width: 30px;" /> <!-- this style affects the whole 1st column -->
<col />
<col />
</colgroup>
<!-- the rest of your table here -->
</table>
This method works with the HTML specification in a way that is compliant - and will resize the whole column. If you instead change the display of the cell to inline-block, as mentioned above, what will happen is that you take the cell out of the table's flow - and other stylistic changes may cease working.
By styling the entire col using the code above, you use the table element's table-layout: fixed styling to your advantage instead.
Additionally - I noticed that you have the cells set up to use text-overflow: ellipsis; Check out this article on quirksmode to understand why it's not working. The fix you need is to make the following edit:
th, td {
border: solid #4682B4 1px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
text-align: center;
white-space: nowrap; /* Add this line */
}
Table cells by default fit to their content and ignore your width.
Other possibility to the already provided answers:
Surround the text with some other container:
<td id="c00" ><div>Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
And change its width:
$('#c00 div').width(30);
You have a few issues:
table-layout: fixed tells the columns to be equal.
Then, even if you take that out, your text is wider than 30 pixels, with no spaces, so it's not going to go narrower than that "aaaaaaaaaa" etc. You'll need to make the text smaller, or add spaces.
Finally, width should be "30px" (in quotes).
Hope that helps.
Try this:
$('#c00').css("width","30px");
or this:
<td id="c00" style='width:30px'>
If you are using IE, you may need to have Compatability Mode on. Also, make sure you are importing the proper jQuery plugin.
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.
I have a html table that has 2 cells in a row. How can I make the second cell appear below the first one instead of next to it? I can only do it in CSS and it's a dirty hack, but ... I still need it.
change the display to block
tr td{
display:block;
}
Add these to the cell style to make it work in IE:
float:left;
clear:both;
CSS:
table{
width: 100px;
}
.block{
border: 1px solid black;
display: block;
width: 100px
}
HTML:
<table>
<tr>
<td class="block">
First Cell
</td>
<td class="block">
Second Cell
</td>
</tr>
</table>
Try it: http://jsfiddle.net/LKFC5/1/
If possible you should try to edit the HTML instead of hacking it with CSS :)
With out affecting the whole table it's not possible.
You can set the display of the table cells to block:
#your-table-id, #your-table-id tr, #your-table-id td {
display: block;
}
You could try this with only the row you want, but those cell will most likely be renders after the rest of the table.
Edit: Actually it dies work with just a row: http://jsfiddle.net/JzkLZ/
Caveat: This won't work in IE6.
How your code look like?
I would rather use jQuery not CSS