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

Question

В проекте были задействованы средства, необходимые для рендеринга таблиц со столбцами определенной ширины только с одной строкой 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? Если так, что это?

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

Answer 1

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

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

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

Answer 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

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

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

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

Answer 3

Вы также можете просто заменить таблицу на 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>

Answer 4

Вам не нужно вкладывать 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>