I have an html table and one column (or <td>) contains very long words. I want to set the max-width of the column so that if text is longer than the max-width the text should auto-wrap to next line. I have tried to set the css max-width style on the appropriate <td> element with "max-width:100px", but it does not work. The text is still very long and does not auto-wrap to next line.
Any ideas what is wrong or any solution reference code? I am using IE 8 on Windows 7.
You need to add the CSS3 property word-wrap: break-word;.
You can put a div inside your table cells.
Nothing within that div will stretch out the table cell.
Works great in IE8 and Chrome at least.
Old html td width will work in IE 8 for that... But you want maximum-width, not a width... besides the extra html attribute needed for each cell.
<td nowrap="wrap" style="width:100px;"></td>
All browsers..
Unfortunately you have to handle each cells content to keep the whole table fixed width. There is a width attribute for but it doesn't control anything..
Related
I'm trying to write a CSS class that allows me to sit form elements (mixed button and text inputs) in a line so that they abut. I'm using display:table on a parent, and wrapping each element in a container with display:table-cell, and it works fine except for one bug that I can't figure out a way around.
So for example, parent is control-group, the element wrappers are control-group-item, and the elements themselves are control-group-input.
.control-group
.control-group-item
.control-group-input{type: "text"}
.control-group-item
.control-group-input{type: "submit"}
CSS of this (I've normalized font size/line height/padding/browser weirdness and all form elements are inline-blocked etc.):
.control-group {
display: table;
.control-group-item {
display:table-cell;
}
gives this, which is OK:
However, I ideally need it to fill a grid column of undetermined size, rather than the browser deciding how big my elements should be. If apply width:100% on .control-group, this happens:
The orange is a background colour applied to the table cell control-group-item. The issue seems to be with the 'submit' input: the submit stays the size it should be but browsers universally add extra space next to it within the table cell. So if I apply width:100% to each .control-group-input, I get this:
Which is OK, but stretches the ‘submit’ button. I can live with that, but is there any way to get it like the second image (but without the random space) using my current approach, or should I sack that off & try something different?
Edit I do not know the sizes of the inputs in advance: I can't set a width on them, which effectively rules out most inline block/float methods. I ideally need IE 8/9 support, which is why display:table was tried.
Edit 2: here are versions on Codepen: http://codepen.io/DanielCouper/pen/knDmC
After rewriting the code there, I realise my question is: how is the width of the table cells being calculated? It's specifically the cell with the submit button that has the extra space. The extra space seems random.
Here's a working version in codepen: http://codepen.io/mkleene/pen/ldqDH
The summary is that you need to remove the width: 100% on the submit button and then give the second table cell element width: 100%. You also need to make the textbox take up its entire parent with a 100% width.
You also need to make sure that the table element is using an auto table layout.
nm, spoke too soon. Thought I had solved it, hadn't, was getting effects from some other CSS.
I have a simple table. The first column has max-width set at 15px. It is design to hold a small icon. I have a few summary rows at the bottom of the table. In on of those rows, I have some long text in that first, small width column. I want the entire text to overflow beyond the TD width. I have this working in all browsers except IE7.
I have a jsfiddle set up at http://jsfiddle.net/sweimer/A96Bx/4/. Open it in IE7 and you will see the text cuts off in the bottom of the first column. All other browsers show as desired.
Thanks in advance for your time.
scott
You are looking for the colspan attribute which says, "I want this cell to span x columns in my table," and set it to "5" since your table has 5 columns in total.
<td class="icoColumn noWrap" colspan="5">
You can use
max-width:15px;
min-width:15px;
I'm facing a rather difficult issue at the moment; really appreciate your help.
I have a table with 2 columns, td1 and td2, and containing texts and both of which have fixed widths.
td1.width = 10px and td2.width = 20px
the fixed width are set at runtime one by one from the left using JQuery (as this table is nested inside another table...)
The text width may be longer than these fixed widths in which scenarios the expected behaviour is that
the fixed width of the columns should stay the same 1) if there are extra texts, the text should wrap, it should not increase or decrease the td width 2) if there are empty spaces, the cell width should not be reduced when resizing other columns or page; it should stay intact.
I have set the td.whitespace property to pre-wrap and td.word-wrap: break-word but they haven't helped.
how would these be possible using css 2.0 (not 3.0)?
Thanks,
In this case, because the widths are so small, and the text doesn't typically have words that small, it has no way to wrap them, so it extends the width of the td even with a set width!
It decreases the width of the second td because the first is using an extra width.
Also, you could have a situation where the text is so wide (a long word for example) and in that case there is no way to wrap it. Unless using javascript, IMO it is the only way.
I recommend reading this answers: HTML TD wrap text
ok, I got it resolved. My table had thead and colgroups. Althought their display attribute was hidden, IE 9.0 ignores it whereas IE 6.0 takes them into account in calculating the width of columns!
I removed them using jquery and sorted out!
$('.myTable thead, .myTable colgroup').remove();
Basically its a 2 column setup, with a dynamic width content column, and a static width menu column.
The content column is going to contain pre-tags (with code), and I need overflow:auto on the pre-tag inside the table to work.
So far I've had little luck. The nature of the pre tag forces a certain size on the table cell, which in turn refuses to be any smaller than the width of the pre tag.
Can anyone help out?
Ps. I've placed a second pre-tag on the page, which works as intended, but thats probably because it's not inside a table.
Add white-space: pre-wrap; to the element. max-width:100% may help too.
I found an acceptable solution.
The solution is a negative right margin for the pre (code) element.
Basically, a negative right margin will force the pre to shrink if it needs to.
I made margin-right -800px, and the width 97%.
I noticed that the width, paddings and borders need tweaking if to look good at all resolutions, but the solution works.
A simple solution that was hard to dream up.
[EDIT]
There was a link to an example, but it has been taken down.
I have a table with fixed layout. On overflow, the contents of cells should clip from the left instead of the right. That is, if the width of the TD is less than the width of the text, the cell below should display "67890" instead of "12345".
This needs to work in IE7+ at minimum. Is there a way to do this in css without any JavaScript?
<table style="table-layout:fixed">
<tr>
<TD>
12334567890
</TD>
</tr>
</table>
you could use:
direction:rtl;
I haven´t tried it, but you could try text-align:right or wrap the contents in a div and float that right.
You can use the CSS3 property word-wrap: break-word but there's no way to control where it will break the word. It will fit whatever it can on the line and then break it down to the next, it won't keep the lines of equal length.
There is also the <wbr> tag but I've never used or experimented with it, so I can't really tell you how to use it.