max-width, width not working on long text with space

Question

I've a table with a td that contains a long string of text without any space. I want to limit the width of the td. But max-width (or width) is not working.

https://jsfiddle.net/gh6eru8p/

<tables>
  <tbody>
    <tr>
      <td>
        <label>Note:</label>
      </td>
      <td  style="max-width:30%">
1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
      </td>
    </tr>
  <tr>
</tbody>
</table>

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) — A. L, Mar 07 '17 at 23:08
Possible duplicate of [Fixed Table Cell Width](http://stackoverflow.com/questions/4185814/fixed-table-cell-width) — Danilo Ivanovic, Mar 07 '17 at 23:21

score 6 · Accepted Answer · edited May 23 '17 at 12:09

6

You need to break the word using word-break, width will work. If you want to add max-width refer this with word-break

<table>
  <tbody>
    <tr>
      <td>
        <label>Note:</label>
      </td>
      <td  style="word-break: break-all;width: 42%;">
1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
      </td>
    </tr>
  </tbody>
</table>

edited May 23 '17 at 12:09

Community

1
1

answered Mar 07 '17 at 23:16

Rohit

1,794
1
8
16

`max-width` != `width` – A. L Mar 07 '17 at 23:17
I know but OP tried width: _I've a table with a td that contains a long string of text without any space. I want to limit the width of the td. But max-width (**or width**) is not working_ – Rohit Mar 07 '17 at 23:19
1

fair enough. Maybe get rid of the second `tr` too while you're at it – A. L Mar 07 '17 at 23:20

score 1 · Answer 2 · answered Mar 07 '17 at 23:50

1

Width should work

apply a class name (say .one) to the td. then add this css

.one {
  width: 30%;
  word-break: break-all;
}

Are you trying to get the table to expand based on the content in it? Or do you want it to simply be 30%?

answered Mar 07 '17 at 23:50

Asool

13,031
7
35
49

max-width, width not working on long text with space

2 Answers2