Блокировка ячеек таблицы на размер по умолчанию независимо от содержимого

Question

Если у меня есть

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

и

table
    { width: 100%; height: 100%; }

Каждая ячейка занимает равную четверть таблицы, и таблица растягивается, чтобы соответствовать окну.

Как я могу предотвратить изменение размера ячеек таблицы, чтобы они соответствовали содержимому внутри ячеек (при этом все еще помещаясь в контейнер таблицы)?

Answer 1

Вы можете попробовать table-layout:fixed; - это устанавливает макет на фиксированный размер (указанный в CSS) и игнорирует содержимое ячеек, поэтому ширина ячейки никогда не меняется.Я не уверен, влияет ли это на вертикальное расположение.

Подробнее о w3schools .

Answer 2

Мне удалось сделать это без фиксированной таблицы. Клетка css:

.dataCell {
  display: table-cell;
  padding: 2px 15px 2px 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: auto;
  max-width: 1px;
}

Answer 3

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

Для этого,Затем вы должны также расположить ячейки таблицы (чтобы абсолютное позиционирование содержимого относилось к ячейке таблицы) - и / или, для поддержки Firefox, поместите дополнительный div в ячейки таблицы , поскольку Firefox нене позволяют вам применить положение к самим ячейкам.

Например, я использую этот HTML-код:

<td><div class="bigimg"><img src="...."/></div></td>

Вместе со следующим CSS, так что размер изображения нене влияет на размер ячейки, в которой она находится:

div.bigimg
{
    height: 100%;
    width: 100%;
    position: relative;
}
div.bigimg > img
{
    position: absolute;
    top: 0;
    left: 0;
}

Я установил height и width из div.bigimg в 100%, чтобы соответствовать размеру td, который содержитэто потому, что я использую JavaScript для изменения размера изображений во время выполнения, чтобы соответствовать их контейнерам, которые являются div.bigimg.

---

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

Answer 4

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

  td:first-child, th:first-child {
    width: 20%;
  }
  // assuming you have 8 remaining columns (20 + 10*8 = 100%)
  td:not(:first-child), th:not(:first-child) {
    width: 10%;
  }

Answer 5

Вы можете попытаться выбрать одну ячейку, чтобы жевать все пространство и установить для нее 100% высоты и ширины:

<table>
    <tr>
        <td>Hi There.</td>
        <td>x</td>
    </tr>
    <tr>
        <td>Here is some text.</td>
        <td class="space-hog"></td>
    </tr>
</table>

и немного CSS:

table {
    width: 100%;
    height: 100%;
}
td {
    white-space: nowrap;
}
td.space-hog {
    width: 100%;
    height: 100%;
}

И живой пример . Вы должны быть осторожны, чтобы избежать неприятного переноса строк, когда .space-hog делает свое дело, следовательно, white-space: nowrap. Если вы поставите .space-hog в последнем ряду, вы можете избежать нажатия на интересные части.

Answer 6

Добавьте table-layout:fixed; к стилю таблицы.

Если вы заметили, что это помогает фиксировать ширину, но не высоту, это потому, что в каждой ячейке td все еще может существовать некоторый вид заполнения.Добавьте padding:0px; к оформлению тд.

Answer 7

Что-то вроде использования overflow:hidden; возможно?

Answer 8

td{ width:50%; } будет работать, пока стол не станет достаточно маленьким.