I'm trying to set the maximum width of a table, but it doesn't seem to be working. If a word inside the table is too long, it automatically expands the width of the table. How do I stop that from happening, and instead have the word that's too long go to the next line?
<style>table {
max-width: 300px;
}
table,
td {
border: 1px solid red;
}
div {
border: 1px solid blue;
word-wrap: break-word;
}
</style>
<table>
<tr>
<td>
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
</div>
</td>
</tr>
</table>
If you want to make your max-width to work, you need to set the CSS property table-layout: fixed; on the table and use width, not max-width.
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Add the following rule your css section.
div{
overflow-wrap: break-word;
max-width: 300px;
word-wrap: break-word; will work if you have width assigned to the container, you are applying this property to. Thus, you will have to assign width:100px; or desired width to div tag.
<style type="text/css">
div {
width: 100px; /* this will limit the length of the word to 100px */
border: 1px solid blue;
word-wrap: break-word;
}
</style>
Putting max-width inside the div solves the problem.
<style>
table,td {
border: 1px solid red;
}
div {
border: 1px solid blue;
word-wrap: break-word;
max-width: 300px;
}
</style>
<table>
<tr>
<td>
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello </div>
</td>
</tr>
</table>
Related
I often use this HTML/CSS structure to create a mobile-friendly table (It changes layout on narrow (mobile) screens; something very lacking in CSS frameworks) and it has been quite reliable for me. In my main project I have several tables with lots of data and varying widths.
If you open this codepen and change the view to 'debug' you can shrink the page width. Past 500px the table layout will change. The thead is hidden, secondary labels are shown and the tds are set to display: flex. (I like to use the responsive device toolbar in the inspector).
Under the table is a more simple set of divs, that behaves the way I want the divs inside the TD to work, but for some reason, the second div inside the td stops shrinking at a certain point. I have tried different combinations of word-wrap and white space but so far no luck. Seems the difference has to do with these divs being inside a table...
Is this just a limitation of tables or is there a way I can make the right div shrink like the second example?
Thanks!
https://codepen.io/sinrise/pen/qoypYJ
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>number</th>
<th>content</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="td-label">number</div>
<div>this is the first one</div>
</td>
<td>
<div class="td-label">number</div>
<div>this is the second one</div>
</td>
</tr>
</tbody>
</table>
<div class="cont">
<div class="in1">oneoneone oneone one oneoneoneoneoneon</div>
<div class="in2">two two twotwotwo twotwotwotwo</div>
</div>
table { width: 100%; table-layout: fixed; margin: 0 0 10px; }
th { padding: 10px 10px 0; text-align: left; }
td { padding: 10px; border: 1px solid #ccc; }
.td-label {
display: none;
min-width: 100px;
max-width: 100px;
font-weight: bold;
}
#media(max-width: 500px) {
thead { display: none; }
td {
display: flex;
margin: 0 0 10px;
> div:not(.td-label) {
word-wrap: break-word;
min-width: 1px;
}
}
.td-label {
display: table;
}
}
.cont {
display: flex;
border: 1px solid black;
> div {
&:first-of-type {
min-width: 100px;
max-width: 50px;
}
min-width: 1px;
border: 1px solid #aaa;
word-wrap: break-word;
}
}
The trick is to set the table width to 100%, add a min-width to the second div, and set display: table on the second div. I updated the pen and code above to reflect.
https://jsfiddle.net/oo73ohtr/
HTML:
<div class="foo">
<table>
<tr>
<td>bar</td>
<td>baz</td>
</tr>
</table>
</div>
CSS:
.foo {
width: 300px;
overflow: auto;
}
td {
border: 1px solid #000;
width: 200px;
}
I would like every td to be 200px wide and .foo to get a vertical scrollbar.
Instead the table gets shrunk to the size of .foo and the td shrink to fit the space available.
What am I doing wrong?
Setting it to min-width instead of width should do the trick.
td {
border: 1px solid #000;
min-width: 200px;
}
I have a root div using 100% width and I want all children not to overlap (overflow:hidden) and also not to use more width than this 100%.
This works fine when I work with inner <div>s, but if <table>s are used, the table gets too wide, using more than the parent 100% div.
How can this be fixed while keeping the table?
Here is the JSFiddle.
Screenshot:
You should give word-break: break-word; for td text , because the text is a large length, or you can give td text as word-break: break-all; for breaking the text.
updated css code
#wrapper table td{
word-break: break-word;
}
demo fiddle: https://jsfiddle.net/nikhilvkd/kLt1mec8/3/
if you add the following styles, it should fix your problem:
#wrapper table {
table-layout:fixed;
}
#wrapper table td {
overflow:auto; /* can be hidden if you want to hide it */
}
Updated code:
#wrapper {
width: 100%;
box-sizing: border-box;
padding: 20px;
}
#item {
padding: 10px;
border-style: solid;
border-color: #ff0000;
border-width: 1px;
overflow: hidden;
}
#wrapper table {
width: 100%;
border-style: solid;
border-color: #ff0000;
border-width: 1px;
table-layout: fixed;
}
#wrapper table td {
overflow: auto;
}
#wrapper table td:nth-child(1) {
width: 10%;
}
#wrapper table td:nth-child(2) {
width: 90%;
}
<div id="wrapper">
<div id="item">
This is a normal text box where the width gets preserved correctly.
</div>
<div id="item">
this div contains a very long word, e.g. https://upload.wikimedia.org/wikipedia/commons/c/ca/Simca_1300_Serie_1_rear_20110114.jpg and the width does correctly not use more than 100% of the parnet's width.
</div>
<table>
<tr>
<td>Col1</td>
<td>Col2 mit viel Text https://upload.wikimedia.org/wikipedia/commons/c/ca/Simca_1300_Serie_1_rear_20110114.jpg the width gets too wide! How can I make this DIV to be not wider than the parent?</td>
</tr>
</table>
</div>
you could add word-break: break-all; to your td
I know there are a lot of answers out there about this problem. But I can't seem to get it. Here is my example:
http://jsfiddle.net/xyJkc/2/
see the first div does not fill the total height of the td. I want the divs in each td to fill up the complete height no matter how much, or how little, text is in each one.
I guess the unclear thing is that the height of each row is not explicitly defined, but it is defined by the maximum height of the content of the cells.
Thanks the help!
here's the code:
html:
<table>
<tr>
<td>
<div>text</div>
</td>
<td>
<div>many lines of text. More and more.</div>
</td>
</tr>
</table>
css:
table {
width:100px
}
td {
border: 1px solid grey;
height: 100%;
}
div {
height: 100%;
border: 1px solid;
}
please try:
the div will be 100%; height.
div{
height: 100%;
border: 1px solid;
display:inline-block;
}
can you add display:inline-table;
div{
height: 100%;
display:inline-table;
border: 1px solid;
}
http://jsfiddle.net/xyJkc/13/
You can set a height on the table or tr. Then the div will fill the whole td.
Example:
tr{
height: 5em; /* or px */
}
I think it's because your div has position value set to static (by default). You can fix it by giving position:absolute; property to the tr or if you don't want to do this you can use jQuery:
$(function()
{
$('div').height($('tr').height());
});
I have a table. Its <td> have overflow: auto.
The width is set to be 100px. In Firefox only, text that exceeds 100px is not hidden and replaced with a scrollbar.
How can I hide content and have a scrollbar when it exceeds the width of its container?
http://jsfiddle.net/be6tM/10/
this question from here maybe solve your problem
nickb answer: "Try wrapping it in a <div>. I'm pretty sure the overflow attribute is not defined for a <td> element, at least in HTML4 it's not."
try to put your overflow:auto to the wrapper hope this can help you
pre, div {
width:100%;
overflow: auto !important;
}
working demo
The easier way to do this would be to add this to the Html
<td class="first">
<div>Don ovonMrLongNameIsMe!!!</div>
</td>
and this to the CSS
div {
overflow:auto;
}
td {
border: 1px solid rgb(0,0,0);
min-width: 100px;
max-width: 100px;
}
Working Example:
div {
overflow:auto;
}
td {
border: 1px solid rgb(0,0,0);
min-width: 100px;
max-width: 100px;
}
<table>
<tr>
<td class="first">
<div>Don ovonMrLongNameIsMe!!!</div>
</td>
</tr>
</table>