Почему моя таблица 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;
}
37
css html table

9 ответов

вы можете получить больше удачи с установкой ширины для ячеек таблицы, если вы примените правило table-layout: fixed к столу-это помогло мне с большим количеством cell-sizing проблемы при использовании таблиц. Я бы не рекомендовал переключаться на использование только DIVs для упорядочения вашего контента, если он соответствует целям таблиц-для отображения многомерных данных.

81

Я согласен с Hristo, но есть некоторые случаи, когда таблица должна использоваться, и решение вашей проблемы таблицы добавляет ниже класса в таблицу, а затем изменяет любую ширину td в соответствии с вашими потребностями.

.tables{ border-collapse:collapse; table-layout:fixed;}

Я надеюсь, что это поможет для тех, кто ищет решение таблицы!

17

давая ему как max-width и min-width атрибуты должны работать.

9

у меня была такая же проблема с кучей столбцов, где я хотел столбцы распорки. Я делал:

<td style='width: 10px;'>&nbsp;</td>

но когда стол был шире окна, распорки были на самом деле не 10px, а, возможно, 5px. И использование только DIVs без таблицы не было вариантом в моем случае. Поэтому я попробовал:

<td><div style='width: 10px;'></div></td>

и это сработало очень хорошо ! :)

3

лучший способ установить ширину столбцов (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; }
2

используйте свойство компоновки таблицы и "фиксированное" значение в таблице.

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

0

у меня были проблемы с невозможностью размера столбцов в 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>
0

невозможно изменить <td> width; то есть, ширина столбца не задается. Вы можете добавить стиль white-space:nowrap; что может помочь. Или вы можете добавить &nbsp;s для добавления пространства в столбцы.

возможно, вы могли бы установить ширину col HTML-способом:<td width="70%">January>/td>

к сожалению, в HTML 4.01 и более поздних версиях этот способ недействителен.

-1

Как насчет чего-то вроде этого...

http://jsfiddle.net/qabwb/1/

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;
}
-8