Использование 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% with и делиться что между клетками относительно их содержания.

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

Чтобы установить ширину ячейки, вам нужно будет дайте этому 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 в каждую ячейку таблицы. Следующее должно достичь того же эффекта.

<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>

Answer 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>