How do I set max-width for a table cell?

Question

Look at this code:

#test {
  width: 20%;
  word-break: break-all;
}

<table>
  <tr>
    <td id="test">
      <ul>
        <li>HiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiBye</li>
      </ul>
</td>
      <td>
        Box 2: Where is its 80% width?
      </td>
  </tr>
</table>

How do I set max width 20% for #test with a super-long string non-broken in it? If I set width for the second td, it wouldn't work!

===

Problem solved:

A line word-break: break-all will simply work. Thanks for all your help!

@pbaldauf it was closed, a silly mistake. Any suggestions how to do that? If it wasn't a duplicate, I'd be surprised that nobody has asked it before. — JCCM, May 01 '15 at 12:14
possible duplicate of [How can I set the max-width of a table cell using percentages?](http://stackoverflow.com/questions/8465385/how-can-i-set-the-max-width-of-a-table-cell-using-percentages) — Turnip, May 01 '15 at 12:15
My string was too long. Did that solution worked? I didn't think that it worked for me, @uʍopǝpısdn ! — JCCM, May 01 '15 at 12:17
I'm so sorry. It's a mistake. I didn't clarify my question. I want to do a long non-broken string. — JCCM, May 01 '15 at 12:19

score 1 · Accepted Answer · answered May 01 '15 at 12:27

Use the CSS properties word-wrap and word-break like shown below:

#test {
  width: 20%; 
  word-break: break-all;
  word-wrap: break-word;
}

<table>
  <tr>
    <td id="test">
      <ul>
        <li>HiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiBye</li>
      </ul>
</td>
      <td>
        Box 2: Where is its 80% width?
      </td>
  </tr>
</table>

How do I set max-width for a table cell?

1 Answers1