Почему моя таблица HTML не соблюдает ширину столбца CSS?
у меня есть таблица HTML, и я хочу, чтобы первые несколько столбцов были довольно длинными. Я делаю это в CSS:
td.longColumn
{
width: 300px;
}
и вот упрощенная версия моей таблицы
<table>
<tr>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
[ . . and a bunch more columns . . .]
</tr>
</table>
по какой-то причине таблица, кажется, делает этот столбец
контейнер который таблица внутри, не имеет никакой тип максимальной ширины поэтому Я не могу понять, почему он сжимает эту колонну, а не уважает эту ширину.
есть ли в любом случае вокруг этого, так что независимо от того, что, этот столбец останется определенной шириной?
Вот CSS внешнего контейнера div:
#main
{
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
9 ответов
вы можете получить больше удачи с установкой ширины для ячеек таблицы, если вы примените правило table-layout: fixed
к столу-это помогло мне с большим количеством cell-sizing
проблемы при использовании таблиц. Я бы не рекомендовал переключаться на использование только DIVs для упорядочения вашего контента, если он соответствует целям таблиц-для отображения многомерных данных.
Я согласен с Hristo, но есть некоторые случаи, когда таблица должна использоваться, и решение вашей проблемы таблицы добавляет ниже класса в таблицу, а затем изменяет любую ширину td в соответствии с вашими потребностями.
.tables{ border-collapse:collapse; table-layout:fixed;}
Я надеюсь, что это поможет для тех, кто ищет решение таблицы!
у меня была такая же проблема с кучей столбцов, где я хотел столбцы распорки. Я делал:
<td style='width: 10px;'> </td>
но когда стол был шире окна, распорки были на самом деле не 10px, а, возможно, 5px. И использование только DIVs без таблицы не было вариантом в моем случае. Поэтому я попробовал:
<td><div style='width: 10px;'></div></td>
и это сработало очень хорошо ! :)
лучший способ установить ширину столбцов (td) - использовать заголовок таблицы (th). Заголовки таблиц автоматически зададут ширину вашего td. Вы просто должны убедиться, что ваши столбцы внутри вашего thead одинаковое количество столбцов в вашем теле.
посмотреть здесь: http://jsfiddle.net/tKAj8/
HTML-код
<table>
<thead>
<tr>
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="long-column">Long Column</th> <!-- th sets the width -->
</tr>
</thead>
<tbody>
<tr>
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="gray">Long Column</td> <!-- td inherits th width -->
</tr>
</tbody>
</table>
в CSS
table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; }
.short-column { background: yellow; width: 15%; }
.long-column { background: lime; width: 70%; }
.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }
используйте свойство компоновки таблицы и "фиксированное" значение в таблице.
table {
table-layout: fixed;
width: 300px; /* your desired width */
}
после настройки всей ширины таблицы, теперь вы можете настроить ширину в % от td.
td:nth-child(1), td:nth-child(2) {
width: 15%;
}
вы можете узнать больше о в по этой ссылке:http://www.w3schools.com/cssref/pr_tab_table-layout.asp
у меня были проблемы с невозможностью размера столбцов в table-layout: fixed
таблица, которая использовала colspan. В интересах тех, кто испытывает вариант этой проблемы, где предложение выше не работает, colgroup работал для меня (вариант кода OP):
div {
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
td.longColumn {
width: 300px;
}
table {
border: 1px solid;
text-align: center;
width: 100%;
}
td, tr {
border: 1px solid;
}
<div>
<table>
<colgroup>
<col class='longColumn' />
<col class='longColumn' />
<col class='longColumn' />
<col/>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td colspan="7">Stuff</td>
</tr>
<tr>
<td>Long Column</td>
<td>Long Column</td>
<td>Long Column</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
</tr>
</tbody>
</table>
</div>
невозможно изменить <td> width;
то есть, ширина столбца не задается. Вы можете добавить стиль white-space:nowrap;
что может помочь. Или вы можете добавить
s для добавления пространства в столбцы.
возможно, вы могли бы установить ширину col HTML-способом:<td width="70%">January>/td>
к сожалению, в HTML 4.01 и более поздних версиях этот способ недействителен.
Как насчет чего-то вроде этого...
HTML-код
<div id="wrapper">
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
</div>
в CSS
#wrapper {
min-width: 450px;
height: auto;
border: 1px solid lime;
}
.row {
padding: 4px;
}
.column {
border: 1px solid orange;
border-left: none;
padding: 4px;
display: table-cell;
}
.first {
border-left: 1px solid orange;
}
.longColumn {
min-width: 150px;
}