Как создать таблицу с фиксированной разметкой?

Question

Хай,

Я использую HTML-таблицу для макета моего сайта. когда мы нажимаем ввод в одной ячейке, размер ячейки изменяется. Я использовал CSS для исправления макета таблицы. Таблица не меняется. Но размер ячейки изменяется.

.pageContent table
{
    height:100%;
    width:100%;
    table-layout:fixed;
}
.pageContent table tr td
{
  padding:5px 10px 5px 10px;
 }

как предотвратить изменение размеров ячеек таблицы?

Answer 1

Вы пытались добавить следующий CSS

td { overflow:hidden;white-space:nowrap;  }
tr { height:1em;  } /* or set an appropriate height and width */

Однако это сократит переполнение в ячейках, но не изменит их размер.

Ваш макет может быть проще сделать с семантически правильным HTML, используя элементы <div>, но нужно будет увидеть разметку.

Answer 2

Размер таблицы изменяется, поскольку вы используете пропорциональную ширину.

Есть много способов контролировать это. Например, установив ваш или высоту в пикселях:

CSS:
table td {height: 20px;}

Ваши клетки больше не будут изменять размеры по вертикали.

Answer 3

Трудно быть уверенным, но вы не установили размер для рассматриваемого тд, только для заполнения. Таким образом, тд будет расширяться, чтобы содержать все, что находится внутри него. В некоторых браузерах это может немного измениться с фокусом.

Не могли бы вы попытаться установить явную ширину и высоту (в ems или пикселях) для td?

.pageContent table tr td
{
  padding: 5px 10px 5px 10px;
  width:8em;
  height:2em;
}

Не могли бы вы опубликовать немного вашей разметки или сообщить нам, что такое содержимое в ячейках? (И в каких браузерах вы видите проблему).