Использование CSS для создания ячеек таблицы определенной ширины без переноса слов

В проекте, в котором я участвовал, мне нужно было визуализировать таблицы с столбцами определенной ширины только с одной строкой HTML в строке таблицы (без обертывания). Мне нужна каждая ячейка таблицы для заполнения 1 пикселя сверху и снизу и 2 пикселя слева и справа. Лучший способ, которым я могу придумать этот кросс-браузер, - разместить div внутри td внутри таблицы следующим образом:

<style>
  table.grid { border: none; border-collapse: collapse; }
  table.grid tbody tr td { padding: 1px 2px; }
  table.grid tbody tr td div { overflow: hidden; white-space: nowrap; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><div>One</div></td>
      <td class="two"><div>Two</div></td>
    </tr>
    <tr>
      <td class="one"><div>Another One</div></td>
      <td class="two"><div>Another Two</div></td>
    </tr>
  </tbody>
</table>

Мне бы хотелось убрать возможность добавить дополнительный div. Я потратил много часов на поиск этой проблемы, но не нашел альтернативы.

Есть ли способ сделать то, что мне нужно, без необходимости добавлять дополнительный div? Если так, что это такое?

Есть ли способ получить желаемый результат без использования таблиц вообще?

Ответ 1

К сожалению, элементы таблицы не учитывают переполнение, поэтому вам необходимо применить это к дочернему элементу.

edit: Возможно, я говорил слишком рано, так как я могу создать этот эффект в FF, используя max-width, и я обнаружил эту вещь который может работать для IE. Вы узнаете что-то каждый день.

edit2: да, это действительно работает для IE7 по крайней мере, но есть серьезное предостережение, что вы не можете иметь пробелы в тексте, их нужно преобразовать в  . Я думаю, вы, вероятно, должны придерживаться решения <div> для обеспечения чистоты и совместимости.

Ответ 2

На самом деле, вы можете.

Обычно стол занимает необходимое место. Если вы дадите table ширину 100%, она возьмет 100% с и разделит это между ячейками относительно их содержимого.

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

Чтобы установить ширину ячейки, вам нужно присвоить ей width и max-width одинакового размера. Для таблицы с N столбцами вы можете сделать это для N-1 столбцов, и последний столбец займет оставшееся пространство.

Если вы сделаете это для столбцов N-2, два столбца, которые не были зафиксированы, будут использовать оставшееся пространство.

Имея все это, вы можете добавить white-space:no-wrap и/или text-overflow:ellipsis если хотите.

Вот пример изображения (мой читатель RSS): https://i.stack.imgur.com/bPpKP.png

И живой пример: https://codepen.io/lehollandaisvolant/pen/REVNLy?editors=1100

Вы можете видеть, что это на самом деле удивительно мощный. В коде ручки вы можете увидеть:

некоторые ячейки имеют фиксированную ширину
некоторые ячейки соответствуют тексту, который он содержит
некоторые клетки соответствуют контейнеру

И вы можете решить поведение каждой ячейки (при условии, что есть одна ячейка, которая подходит к контейнеру)

Ответ 3

Вам не нужно вставлять div в каждую ячейку таблицы. Следующее должно достичь такого же эффекта.

<style>
  table.grid { border-collapse: collapse; }
  table.grid tbody tr td { overflow: hidden; white-space: nowrap; padding: 1px 2px; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><span>One</span></td>
      <td class="two"><span>Two</span></td>
    </tr>
    <tr>
      <td class="one"><span>Another One</span></td>
      <td class="two"><span>Another Two</span></td>
    </tr>
  </tbody>
</table>

Ответ 4

Вы также можете просто заменить таблицу на div.

Затем вы должны определить ширину столбца в CSS (что может быть непросто заставить работать во всех браузерах).

Пример: ваш код будет выглядеть так:

<div class="mainBoxOfTable">
    <div class="Line">
      <div class="ColumnOne">One</div>
      <div class="ColumnTwo">Two</div>
    </div>
    <div class="Line">
      <div class="ColumnOne">another One</div>
      <div class="ColumnTwo">another Two</div>
    </div>
 </div>