Подтвердить что ты не робот

Почему моя таблица 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>

По какой-то причине таблица, похоже, делает этот столбец < 300px, когда есть много столбцов. Я в основном хочу, чтобы она сохраняла эту ширину независимо от того, что (и просто увеличивайте горизонтальную полосу прокрутки).

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

Во всяком случае, вокруг этого, несмотря ни на что, этот столбец останется определенной шириной?
Вот 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;
}
4b9b3361

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

Придание ему атрибутов max-width и min-width.

Ответ 4

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

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

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

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

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

Ответ 5

Лучший способ задать ширину столбцов (td) - использовать заголовок таблицы (th). Заголовки таблицы автоматически устанавливают ширину на вашем td. Вам просто нужно убедиться, что ваши столбцы внутри вашего ада имеют одинаковое количество столбцов в вашем теле.

Проверьте здесь: 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; }

Ответ 6

Используйте свойство table-layout и значение "fixed" в вашей таблице.

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

Ответ 7

У меня были проблемы с невозможностью сортировки столбцов в таблице table-layout: fixed, использующей colspan. В интересах любого, кто испытывает вариант этой проблемы, когда вышеприведенное предложение не работает, коллега работала для меня (изменение кода 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>

Ответ 8

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

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

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

Ответ 9

Как насчет чего-то подобного...

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