Использование 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. Я много часов искал эту проблему в Google, но не могу найти альтернативы.
Есть ли способ делать то, что мне нужно, без необходимости добавлять дополнительный div? Если так, то, что это?
Есть ли способ получить желаемый результат вообще без использования таблиц?
Зачем вам div? В конце концов, td - это блочный элемент.
Гарет, спасибо, добавил сетку в класс таблицы. cletus, я пробовал переполнение: скрытый; белое пространство: nowrap; to td, и это не работает.
Ответы 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>
Спасибо за быстрый ответ. Я пробовал использовать overflow: hidden; белое пространство: nowrap; в тд, но вроде не работает кросс-браузер.
зачем добавление голых пролетов что-либо делать? не говоря уже об улучшении добавления div?
К сожалению, элементы таблицы не учитывают переполнение, поэтому вам нужно будет применить это к дочернему элементу.
edit: Возможно, я сказал слишком рано, так как я могу создать этот эффект в FF с помощью max-width, и я обнаружил эта вещь, который может работать для IE. Вы узнаете что-то каждый день.
edit2: да, это работает, по крайней мере, для IE7, но есть серьезная оговорка, что у вас не может быть пробелов в тексте, они должны быть преобразованы в . Я думаю, вам, вероятно, следует придерживаться решения <div> ради чистоты и совместимости.
вау, спасибо за ссылку и комментарии. Я буду придерживаться того, что у меня есть, но благодаря вашему ответу я стал более образованным. Спасибо.
ссылка больше не работает, поэтому здесь принято размещать соответствующий контент.
Вы также можете просто заменить таблицу на 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>
Собственно, ты можешь.
Обычно стол занимает необходимое место. Если вы зададите 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
Вы можете видеть, что это действительно потрясающе мощное средство. В коде вы можете увидеть:
- некоторые ячейки имеют фиксированную ширину
- некоторые ячейки соответствуют тексту, который он содержит
- некоторые ячейки подходят к контейнеру
И вы можете определить поведение каждой ячейки (если есть одна ячейка, которая подходит к контейнеру)
Учитывая, что в spec. не определяет его для ячеек таблицы, не рекомендуется использовать max-width: stackoverflow.com/questions/8465385/… ... можно это или нет.
Вы должны добавить класс "grid" в таблицу в вашем примере HTML, чтобы он соответствовал вашему примеру CSS.