Невозможно установить ширину в столбце в широкоугольной таблице

Итак, моя таблица имеет около 100 столбцов. Моя проблема заключается в том, что я не могу установить ширину первого столбца вообще, если я не удалю несколько столбцов или не удалю весь текст заголовка в тегах <TH></TH>, который, очевидно, не является решениемНевозможно установить ширину в столбце в широкоугольной таблице

Ширина таблицы ограничена шириной контейнер. Нужно ли вообще указывать ширину первого столбца в очень широкой таблице?

Я попытался style="width:200px !important" на TH и TD теги, но он не работает

Благодаря

UPDATE

Вот jsFiddle - http://jsfiddle.net/16p66fxu/

источник

2014-09-15 pee2pee

сообщение какой-то код или сделать скрипку было бы намного лучше – Richa

Это буквально таблица HTML со 100 столбцами, но будет делать jsfiddle - http://jsfiddle.net/16p66fxu/ – pee2pee

http://css-tricks.com/fixing-tables-long-s trings/ –

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

table { 
    table-layout:fixed; 
}

Docs:

ширины таблицы и столбцов устанавливаются ширины таблицы и Col элементов или с помощью ширина первой строки ячеек. Ячейки в последующих строках не влияют на ширину столбцов.

В соответствии с методом «фиксированного» макета, вся таблица может быть отображена один раз была загружена и проанализирована первая таблица. Это может ускорить до времени рендеринга по методу «автоматического» макета, но последующее содержимое ячейки может не соответствовать установленным ширинам столбцов. Любая ячейка, в которой имеет содержимое, которое переполняет, использует свойство переполнения, чтобы определить , нужно ли обрезать содержимое переполнения.

Пока оно по умолчанию auto, самое лучшее, что вы можете сделать, это дать подсказки для автоматической калибровки браузера.

Read more on table-layout here.

источник

2014-09-15 09:24:26

Спасибо, что, к сожалению, испортил мою реализацию DataTables. – pee2pee

Не о чем я могу сказать об этом - либо вы получаете интеллектуальный размер (с меньшим контролем), либо тупой размер (с полным контролем). Никаких средних дорог на этом :) –

table { table-layout: fixed; width:100%; } и вам необходимо использовать стиль min-width:500px вместо стиля width. DEMO

источник

2014-09-15 09:30:55 Hamix

Эта проблема сложна, но ее можно решить. Как писал @Hamix, следует использовать min-width, а не width. Но не нужно устанавливать table{width:100%;}, ведь с широкой таблицей это испортит макет, так как таблица должна быть более широкой, чем окно браузера, с горизонтальной полосой прокрутки. Кроме того, при ширине стола 100%, width работает просто отлично. Проблема в том, что с негабаритных таблиц width не работает на элемент таблицы.

Как писал @Niels_Keurentjes, первая строка таблицы определяет макет ширины столбца. Я не смог использовать теги <col>, чтобы явно установить ширину столбцов. Но альтернативой было бы использовать более длинное имя заголовка столбца, чтобы заставить более широкий столбец, например.используя подчеркивания, но это чаще всего было бы уродливым взломом.

Другой альтернативой является размещение заголовка столбца в div как: <th><div>Abcdef</div></th> и стиль div в css (или inline) с width:150px.

Ниже приведены примеры файлов, которые я экспериментировал с, чтобы это было сделано:

t.css:

.longtext{ 
min-width:150px; 
} 

table{ 
    /*width: 100%;*/ 
    table-layout: fixed; 
    border-collapse: collapse; 
} 

table,th,td{ 
    border: 1px solid black; 
}

sampletable.html:

<html> 
    <head> 
     <link href="t.css" rel="stylesheet" type="text/css" media="all"> 
    </head> 
    <body> 
     <table> 
      <colgroup> 
       <col></col> 
       <col></col> 
       <col></col> 
       <col style="width: 200px; background-color:yellow;"></col> 
       <col></col> 
       <col></col> 
       <col></col> 
       <col></col> 
       <col></col> 
       <col></col> 
       <col></col> 
       <col></col> 
       <col></col> 
       <col></col> 
       <col></col> 
      </colgroup> 
      <tr> 
       <th>ColumnHeader</th> 
       <th>ColumnHeader</th> 
       <th>ColumnHeader</th> 
       <th class="longtext"><div class="longtextxx">Saying</div></th> 
       <th>ColumnHeader</th> 
       <th>ColumnHeader</th> 
       <th>ColumnHeader</th> 
       <th>ColumnHeader</th> 
       <th>ColumnHeader</th> 
       <th>ColumnHeader</th> 
       <th>ColumnHeader</th> 
       <th>ColumnHeader</th> 
       <th>ColumnHeader</th> 
       <th>ColumnHeader</th> 
       <th>ColumnHeader</th> 
       <th>ColumnHeader</th> 
      </tr> 
      <tr> 
       <td>1</td> 
       <td>2</td> 
       <td>3</td> 
       <td>Shoot first, ask questions later</td> 
       <td>5</td> 
       <td>6</td> 
       <td>7</td> 
       <td>8</td> 
       <td>9</td> 
       <td>10</td> 
       <td>11</td> 
       <td>12</td> 
       <td>13</td> 
       <td>14</td> 
       <td>15</td> 
       <td>16</td> 
      </tr> 
     </table> 
    </body> 
</html>

источник

2014-12-17 10:28:16 Roland

Невозможно установить ширину в столбце в широкоугольной таблице

ответ

Смежные вопросы