Используя CSS td width absolute, position


103

Пожалуйста, посмотрите этот JSFIDDLE

td.rhead { width: 300px; }

Почему не работает ширина CSS?

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

Кроме того, каково влияние position: fixed, absolute и т.д. на ширину td, если таковая имеется? Я ищу причину больше, чем исправление. Я надеюсь понять, как это работает.

td ширина не 300 пикселей, как хотелось бы


display: table-cellне уважает width(точно так же, как не работает display: inline). Я не понимаю, о чем вы спрашиваетеposition fixed|absolute
Explosion Pills

@ExplosionPills, потому что в моем фактическом коде таблица установлена ​​на фиксированную. Как вы можете догадаться, я пытаюсь разместить временную шкалу вверху страницы. Поэтому я просто заявляю, что атрибут позиции влияет на ширину.
Джейк

Ответы:


144

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

<td><div style="width: 300px;">wide</div></td>

Это не должно иметь большого значения, является ли он <table>сам по себе position: fixedили абсолютным, потому что положение ячеек все статично относительно таблицы.

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

РЕДАКТИРОВАТЬ: Я не могу взять кредит, но, как говорится в комментариях, вы можете просто использовать min-widthвместо этого widthв ячейке таблицы.


31
+1 - я использовал этот обходной путь раньше. Как ни странно, min-widthна TD, похоже на работу в Chrome и FF: jsfiddle.net/Mkq8L/7
Tim Medora

2
На самом деле, как всегда, после публикации вопроса я обнаружил, что это min-width: 300pxработает! (@TimMedora, ты был на несколько секунд быстрее!)
Джейк,

Я думаю, что лучший ответ - упомянуть поведение display: table-cell. Спасибо!
Джейк

Для меня такое поведение имеет смысл: что должно произойти, если вы установите две разные ширины для двух ячеек в одном столбце? С min-widthэтим проблем нет, возьмите самый большой.
Чиро Сантилли 郝海东 冠状 病 六四 事件 法轮功

3
Это хак, не рекомендую. Общая ширина td превышает ширину таблицы. Это проблема. Вы не должны исправлять это добавлением дополнительных HTML-структур.
Дэвид

28

Тебе лучше использовать table-layout: fixed

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

Исправлено гораздо лучше и быстрее отображается на странице. Структура таблицы зависит от общей ширины таблицы и ширины каждого из столбцов.

Здесь это применяется к исходному примеру: JSFIDDLE , вы заметите, что остальные столбцы раздавлены и перекрывают их содержимое. Мы можем исправить это с помощью еще нескольких CSS (все, что мне нужно было сделать, это добавить класс в первый TR):

    table {
        width: 100%;
        table-layout: fixed;
    }

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

Здесь можно увидеть в действии: JSFIDDLE


11

Причина, по которой он не работает в предоставленной вами ссылке, заключается в том, что вы пытаетесь отобразить столбец 300 пикселей ПЛЮС 52 столбца, каждый из которых охватывает 7 столбцов. Уменьшите количество столбцов, и это работает. Вы не можете разместить столько на экране.

Если вы хотите заставить столбцы соответствовать, попробуйте установить:

body {min-width:4150px;}

см. мой jsfiddle: http://jsfiddle.net/Mkq8L/6/ @mike Я пока не могу комментировать.


2
+1 за обнаружение того, что порог ширины таблицы увеличивается с шириной тела.
Джейк

8

Причина в том, что вы не указали ширину таблицы, и вся ваша куча td переполняется.

Например , я дал таблице ширину 5000 пикселей, что, как я думал, будет соответствовать вашим требованиям.

table{
    width:5000px;
}

Это тот же самый код, который вы предоставили, который я просто добавил в ширину таблицы.

Я считаю, что это происходит потому, что ваш TD намного превышает ширину таблицы по умолчанию. Что вы могли видеть, если вы вытащите около 45 из своих td в каждом tr (то есть код, который вы указали в своем вопросе, а не jsfiddle), он отлично работает


2
+1 за упоминание о том, что существует порог ширины таблицы. Проблема в том, что иногда мы не знаем заранее общую ширину. Какая ширина таблицы по умолчанию?
Джейк

Я вообще-то не знаю. Все, что я знаю, это то, что если у вас слишком много столбцов, таблица будет раздавлена, и все дочерние узлы станут бесполезными. Я сталкивался с этим раньше, но мне еще не удалось узнать значение по умолчанию. Может, мне стоит задать это как вопрос.
Хэ Хуэй

Я считаю, что решил эту проблему stackoverflow.com/questions/14767459/…
He Hui

Это реальный ответ, а не высоко оцененный. Ширину можно установить только в том случае, если содержимое не выходит за пределы всей ширины таблицы.
Дэвид

5

Попробуйте, это сработает.

<table>
<thead>
<tr>
<td width="300">need 300px</td>

1
ВОТ ЭТО ДА! Спасибо ♥
ivahidmontazer

Пожалуйста, добавьте объяснение того, почему / как этот код помогает OP. Это поможет дать ответ будущим зрителям. См. Этот Мета-вопрос и ответы на него для получения дополнительной информации.
Heretic Monkey

1
Обратите внимание, что атрибут ширины не рекомендуется в HTML5.
simhumileco

5

Попробуй использовать

table {
  table-layout: auto;
}

Если вы используете Bootstrap, класс tableимеет table-layout: fixed;по умолчанию.


4

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

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


3

Мое безумное решение.)

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});

2

Если ширина таблицы составляет, например, 100%, попробуйте использовать процентную ширину на td, например 20%.


2

Обернуть содержимое первой ячейки в div, например, вот так:

HTML:

<td><div class="rhead">a little space</div></td>

CSS:

.rhead {
  width: 300px;
}

Вот файл jsfiddle .


1

Вы также можете использовать:

.rhead {
    width:300px;
}

но это будет только с некоторыми браузерами, если я правильно помню, IE8 не позволяет этого. В целом, безопаснее просто поместить width=""атрибут в <td>себя.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.