как изменить ширину ячейки html

#html #css

#HTML #css

Вопрос:

У меня есть таблица html, в которой я хотел бы вручную управлять размерами ячейки. Я запутался в том, как это должно работать. Прежде всего, существует атрибут css «table-layout», который должен определять, устанавливается ли размер ячейки автоматически на наибольшее содержимое в столбце или на фиксированный размер. Я попытался установить ширину css для элементов td, используя как table-layout=auto, так и =fixed, и оба раза содержимое уменьшалось по сравнению с его первоначальным размером. Проблема в том, что он не уменьшился до желаемого размера, используя любое значение для компоновки таблицы. Вот мой код css:

 table {table-layout:fixed;}
tr, td {border-style:solid;
  border-width:2px;}
.coursename{width:50px;}
.startdate {width:5px;} 
.isbn{width:10px;}
.author {width:20px;}
.booktitle{width:10px;}
  

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

Комментарии:

1. Можете ли вы опубликовать образец html с примером содержимого? Трудно найти решение только с помощью css.

Ответ №1:

Одна из идей, которая может помочь, это, например, если у вас есть ссылка в каждой ячейке, установите ссылку следующим образом:

 a { display: block; width: 30px; }
  

Сделайте это для каждой ячейки в строке таблицы, и у вас будут ячейки таблицы с фиксированной шириной. При условии, что вы также зафиксировали ширину таблицы … 🙂

Ответ №2:

Я все еще не уверен, в чем ваша проблема, но вы могли бы попробовать {table-layout:inherit;} Это должно получить размер из родительского элемента. Кроме того, вы можете вставить элемент css в html и переопределить любые другие элементы, указав перед ним! {class=»!width:300px;»}

Надеюсь, это поможет.