#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;»}
Надеюсь, это поможет.