Строки таблицы с двумя строками текста

Question

У меня есть две таблицы рядом. Мне нужно, чтобы строки выстраивались в линию, но иногда содержимое может быть длиннее строки таблицы из-за сужения ширины на странице, и оно разбивается и образует строку таблицы из двух строк.

Можно ли создать что-то вроде двойных строк, которые могут содержать две строки текста, чтобы все выстраивалось в линию независимо от того, имеет ли содержимое 1 или 2 строки?

Answer 1

Вы можете решить это двумя способами, один из них - создать строки с фиксированной высотой, как вы предлагаете, другое решение - создать большую таблицу с 3 столбцами, в которой вы удаляете границы из среднего столбца, чтобы он выглядел следующим образом 2 таблицы.

Решение, которое вы запрашивали, могло бы быть следующим:

<style>
td { vertical-align: top; }
td div { height: 40px; overflow: hidden; }
</style>
<table width="400">
  <tr>
    <td><div>short content</div></td>
    <td><div>long content long content long content long content</div></td>
    <td><div>long content long content long content long content</div></td>
  </tr>
  <tr>
    <td><div>long content long content long content long content</div></td>
    <td><div>short content</div></td>
    <td><div>long content long content long content long content</div></td>
  </tr>
</table>

Answer 2

Дайте высоту TD: 2.5em или около того (вам придется играть с этим значением, это зависит от других параметров, таких как поля / отступы / высота строки, которые вы используете.

Answer 3

Вы можете добавить (минимальную) высоту к строкам или ячейкам таблицы (хотя это не будет работать в старых браузерах, таких как IE6) с чем-то вроде:

tr {
   min-height: 2em;
}

или

tr {
   min-height: 24px;
}

Если вам нужно, чтобы он работал аналогично в IE6, вместо этого вы можете добавить 'height: ...'.

Надеюсь, это поможет!