Стиль CSS таблицы тд

Question

Мой сайт позволяет пользователям создавать таблицы с помощью PHP.Количество строк и ячеек является переменным, но количество столбцов всегда фиксировано.Таблица обычно генерирует двухзначные числа.Когда таблица генерирует трехзначные числа, вся таблица расширяется, чтобы приспособиться к этому, и размер таблицы увеличивается, разрушая мой макет.Есть ли способ использовать CSS и стилизовать tds этой таблицы, чтобы таблица не меняла размер при генерировании трехзначных чисел.(3 цифры самые длинные).Я попытался добавить отступы к таблице, но она не работает.

Кроме того, я должен использовать идентификатор в таблице или классе?

Answer 1

td {
  width: 50px;
}

Я думаю, что-то подобное может сработать для вас.Очевидно, что вы можете настроить фактическую ширину в соответствии с вашими потребностями.

А если вы используете несколько таблиц и хотите исправить только одну, присвойте рассматриваемой таблице идентификатор:

<table id="fixed_table">

и затем в css вы можете сказать:

#fixed_table td {
  width: 50px;
}

, и это повлияет только на tds в этой конкретной таблице.Конечно, если вы хотите повлиять на некоторые таблицы, но не на другие, вы бы использовали класс вместо идентификатора.

Answer 2

Вы можете использовать комбинацию width и max-width:

td {
    border: 1px solid #ccc;
    width: 2em; /* or whatever... */
    max-width: 2em; /* or whatever... */
    height: 2em; /* or whatever... */
    line-height: 2em; /* or whatever... */
    text-align: center; /* a personal aesthetic choice... */
    overflow: hidden; /* to prevent overflow... */
}

Демонстрация JS Fiddle .

( Обратите внимание , что, хотя я использую jQuery в демоверсии, это только для генерации контента и не обязательно для работы демо.)

Answer 3

Установить фиксированную ширину столбцов.