Word wrap in table changes cell size

Question

I have a table with 2 columns, one of which has word-wrap: break-word:

table {
    table-layout: fixed;
    width: 100%;
    border: 1px dotted gray;
}

table td {
    border: 1px solid blue;
}

table td:nth-child(2) {
    word-wrap: break-word;
}

<table>
    <tr>
        <td>Column1</td>
        <td>Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2</td>
    </tr>
</table>

I'd like to keep the first column's width to a minimum, and the second column expanding to fit the rest of the table.

But word-wrap: break-word only works if I set table-layout: fixed and that forces all columns to have equal dimensions. How can I achieve what I want without explicitly setting a width value on the first column?

I don't have CSS solution for this. Just one Jquery trick, based on this: http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery Here it is: http://jsfiddle.net/xgk455xr/ Basically, you must set width, but it is set dynamically this way.... — sinisake, Aug 08 '15 at 15:34

Chaya Sandamali · Accepted Answer · 2015-08-08T15:55:00.737

1

You can achieve that using the width attribute of the <td> like below.

table {
  table-layout: fixed;
  border: 1px dotted gray;
}
table td {
  border: 1px solid blue;
}
table td:nth-child(2) {
  word-wrap: break-word;
  width: 100%;
  max-width: 1px;
}

<table>
  <tr>
    <td>Column1</td>
    <td>Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2</td>
  </tr>
</table>

edited Aug 08 '15 at 15:55

answered Aug 08 '15 at 15:01

Chaya Sandamali

657
9
22

Thanks, but as I said in my question, I don't want to set a width on either column, since I don't know how much content there will be. – Atlas23250 Aug 08 '15 at 15:03
Oops, i missed the last sentence sorry. So, do you want to make the first column fit the longest word it contains? – Chaya Sandamali Aug 08 '15 at 15:04
Yes that's exactly it. – Atlas23250 Aug 08 '15 at 15:07
@Atlas23250 I have edited my answer. I hope that's the behavior that you expect? Yeah giving pixel values for the entire `table` is not a good idea. My edited answer is better I hope. – Chaya Sandamali Aug 08 '15 at 15:55
Nicely done! Adding a `max-width` value, that's very clever. Thanks a lot – Atlas23250 Aug 08 '15 at 15:59

score 0 · Answer 2 · answered Aug 08 '15 at 15:06

Just add a single bit of css,code is displayed under,try it

table td {
border: 1px solid blue;
}

table td:nth-child(1) {
width:100px;   //your value
}

table td:nth-child(2) {
word-wrap: break-word;
}

Hope this will enough for you

Regds..

Word wrap in table changes cell size

2 Answers2