3

I have the following HTML code:

<div class="container">
  <table class="table">
    <tbody class="tBody">
      <tr>
        <td>Hellooooooooooooooooooooooooooooooooooooooooooooo</td>
        <td>World</td>
      </tr>
    </tbody>
  </table>
</div>

And CSS:

.container {width: 100%;}
.table {display:block;}
.tBody {max-width: inherit;}

My problem is that the total width is defined by a dragbar, so the widths of all the elements must me dynamic. I want the text inside the <td> element to be able to wrap itself dynamically. So far, the <div>'s width changes its value according to the position of the dragbar. To make it have the <div>'s width, I set the <table> CSS to display:block. The rest of the elements in the table, <tbody>, <tr>, <td>, set their width to the widest element in the table, which in this case is the text 'Hellooooooooooooooooooooooooooooooooooooooooo'. So right now, if I move the dragbar to try to make the table smaller, the div will change its width but the table elements' width will remain the same. Text won't wrap either.

How to make the width of a table (and its children) be set by a dragbar?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
rredondo
  • 503
  • 1
  • 10
  • 19

3 Answers3

6

Just add this line to your CSS :

td {word-wrap: break-word; word-break: break-all;}

A demo :

.container {width: 100%;}
.table {display:block;}
.tBody {max-width: inherit;}
td {word-wrap: break-word; word-break: break-all;}
<div class="container">
  <table class="table">
    <tbody class="tBody">
      <tr>
        <td>Hellooooooooooooooooooooooooooooooooooooooooooooo</td>
        <td>World</td>
      </tr>
    </tbody>
  </table>
</div>

See also this Fiddle.

John Slegers
  • 45,213
  • 22
  • 199
  • 169
  • This worked, just after I **double checked there were no** `white-space: nowrap;` rules messing with the table elements. – rredondo Oct 07 '16 at 08:53
  • Also, I had to read a little about the difference between `word-wrap` and and `word-break`, [link]http://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break It seems to me there is no need to use them in the same element/class. – rredondo Oct 07 '16 at 09:04
  • 1
    @RaquelRedondo : Browser support for [`word-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap) is generally a bit better than for [`word-break`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break), but [not really for `