Как ограничить расползание ширины div'а?

Question

[softshape]

Есть обертка, в которой находятся таблица и подпись. Предполагается, что ширина обертки определяется таблицей. Все ОК пока подпись не становится слишком длинной. Она не хочет переноситься на вторую строку до тех пор, пока обертке не указана фиксированная ширина.



Однако задать фиксированную ширину для обертки невозможно, т.к. ширина таблицы может изменяться.

Вопрос, как заставить подпись не распирать контейнер, а вписываться в него по ширине всегда и переноситься на другую строку, если это необходимо?

Answer 1

[Ankhena]

https://jsfiddle.net/Ankhena/m8zgqtzt/

<main>
  <table>
    <tr>
      <td>ss</td>
      <td>ss ss</td>
      <td>ss ssss</td>
      <td>ss</td>
      <td>ss</td>
    </tr>
  </table>
  <div>Текст не больше ширины таблицы.</div>
</main>

main {
  position: relative;
  display: inline-block;
  outline: 1px solid #999;
}

table {
  background: #aaa;
}

div {
  position: absolute;
  background: #eee;
}

Comments

[softshape]

Йес!!

Answer 2

[Дима Долготер]

Если не получится, бери ширину таблицы динамически, с помощью js и вставляй ее в макс ширину строки

Comments

[softshape]

Ни фига себе костыль.

[Дима Долготер]

softshape, ну, раз ничего не помогает. Это все что можно сказать без кода. Но там пара строчек на Jquery