Таблицы: Как достичь «нормальной» ширины td, но ширина таблицы 100%?

На нашем сайте есть таблицы, содержащие данные. Нам нравятся ширины столбцов, которые мы получаем с нормальным table, но нам нравится нижняя граница td s, чтобы растянуть всю ширину страницы, как мы получаем с помощью CSS: table { width:100% }, как видно на demo table widths page, который выглядит следующим образом: :Таблицы: Как достичь «нормальной» ширины td, но ширина таблицы 100%?

redered image

можно ли достичь тех же ширину столбцов, как с обычной таблицей (не ширина-100%) в виде таблицы, где граница дна простирается по всей ширине?

И нет, td { white-space: nowrap } в сочетании с дополнительным width: 100%td (см ссылку выше) не хорошо, а иногда td s длинные и поэтому мы хотим, чтобы td s обернуть так же, как в обычной таблице.

Нам нужно решение, которое работает как минимум в IE6-8 + FF.

Btw, есть ли лучший способ (tm) отображения фрагментов HTML, чем ссылки на внешнюю страницу? Я могу показать только источник, но с отображением HTML тоже очень показательно.

Это было первоначально размещено на Webmasters, но после предложения там я теперь (повторно) разместил его здесь.

источник

2010-12-13 Peter V. Mørch

Вы также можете добавлять изображения рядный с вопросом, чтобы показать тонированное версия –

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

Вы можете использовать новые свойства CSS min-width и max-width, чтобы связать размеры столбцов, не устанавливая их явно.

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

Вытащил этот пример использования JQuery для синхронизации ширины столбцов двух таблиц из another question:

$("#t1").width($("#t2").width()); 
$("#t1 tr td").each(function (i){ 
     $(this).width($($("#t2 tr:first td")[i]).width()); 
})

Должно быть очень хорошей отправной точкой для масштабирования ваших ширины столбцов.

источник

2010-12-13 23:38:14

Спасибо за ваш ответ, bemace. В таблицах содержится динамический контент, поэтому я понятия не имею, как установить «минимальную ширину» и «максимальную ширину» в общем случае. Подход «render-normal-then-read-widths-then-resize» имеет всевозможные проблемы, поскольку он используется в очень многих местах нашего приложения: обработка изменения размера окна требует больше javascript, так же как ajax-обновления или эффекты mouseover вызвать таблицу "resizes" тоже. Это может быть сделано. Но это не тривиально. Отсюда вопрос здесь! ;-) –

Я, наконец, понял это.

Мои первые несколько попыток касались плавающих <td> и <tr> с, но, видимо, я был на правильном пути, но имел неправильный элемент.

Я думаю, что вы хотите поплавать <tbody>. <table> по-прежнему будет на 100% шириной, поэтому он будет растягивать всю ширину страницы, но внутри него будет находиться контейнер <tbody>, который будет выступать в качестве контейнера для всего остального, а плавающий его освободит из кантов размером <table> ширина контейнера.

Недостатком этого является то, что вы не сможете использовать <thead> или <tfoot> элементов, потому что у вас больше не будет возможности выровнять их с контентом <tbody>.

Попробуйте это:

table { 
    width: 100%; 
    border: 1px #000 solid; 
} 

tbody { 
    float: left; 
} 

td { 
    border: 1px #000 solid; 
}

источник

2010-12-13 23:49:48 AgentConundrum

Я вижу, как это делает таблицу шириной 100%. Но нижняя граница «td's» не является 100% -ной шириной, и это то, что нам нужно. –

@Peter: Верно, извините. Я потерял из виду лес для деревьев. Я был настолько сосредоточен на том, чтобы сделать ячейки правильного размера, что я забыл, что строки должны были быть на 100%. Единственное, что я могу вам дать, это мой оригинальный «плавать» '', но он хрупкий, как черт. Я не думаю, что смогу вам помочь, извините. – AgentConundrum

Это очень некрасиво и не совсем то, что вы просили, но он работает в Firefox и, кажется, чтобы получить ту же самую суть ...

<html> 
<head> 
<style type="text/css"> 
td{background-color:blue;} 
div{border:1px solid red;position:absolute;width:100%;} 
</style> 
</head> 
<body> 

<table> 
<tr> 
<td>asdf<div></div></td><td>hello blah blah</td> 
</tr> 
<tr> 
<td>lorem ipsum dolor si amet</td><td>testing</td> 
</tr> 

</body> 
</html>

источник

2010-12-14 00:55:36 joelt

Я разместил [HTML-версию] (http://www.morch.com/download/tableWidth/tableWidthWithDiv.html) (где я правильно настраивал поля и т. Д.), И он [отлично смотрится в FF] (http://www.morch.com/download/tableWidth/divTableWidth-FF.png), как вы указываете. Это [выглядит ужасно в IE] (http://www.morch.com/download/tableWidth/divTableWidth-IE.png). Спасибо за ваше предложение! –

I искал аналогичный ответ на этот вопрос, однако я не понимаю, что вы подразумеваете под

И нет, td {white-space: nowrap} в гребне ination с дополнительной шириной: 100% td (см. ссылку выше) нехорошо, так как иногда tds длинны, и поэтому мы хотим, чтобы tds обертывались точно так же, как в обычной таблице.

Но, в любом случае, я нашел решение своей проблемы. Не уверен, что его можно использовать здесь, но он решил мою проблему. Может быть, это может быть полезно для других.

Я не добавлял в другой тд. Я просто применил 100% к каждому последнему td с контентом. Таким образом, я мог бы добавить класс для каждого последнего td, чтобы сделать это, или я мог бы использовать селектор последнего слова, чтобы сделать это для меня.

Что-то вроде:

table 
{ 
    width:auto; 
} 

table tr td:last-child 
{ 
    width:100%; 
}

источник

2014-03-25 17:01:05 cowgirl

Проблема с добавлением другого 'td' или установки' td: last-child {width: 100%} 'заключается в том, что это отличается от« обычной таблицы ». Сравните первую треть моего снимка экрана в OP с последней трети. Я хочу рендеринг/интервал с первой трети снимка экрана, но с подчеркиваниями, проходящими по всей ширине страницы. –

Таблицы: Как достичь «нормальной» ширины td, но ширина таблицы 100%?

ответ

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