CSS Hell, имитирующий TABLE с DIV
Я пытаюсь смоделировать таблицу, используя только CSS и DIV. Проблема в том, что ничего, что я делаю, может отлично имитировать поведение макета таблицы.
Ниже представлен макет таблицы, который я хочу и сразу ниже этого, что я мог бы достичь с помощью CSS/DIV:
Макет с таблицей /CSS и таблицей /CSS http://i53.tinypic.com/2ujjk0w.jpg
HTML/CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Teste</title>
<style type="text/css">
table{
table-layout:fixed;
width: 333px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
table th, table td
{
border-width: 1px;
padding: 1px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
table th.column1, table td.column1{
width:60px;
background-color:#CCD9FF;
}
table th.column2, table td.column2{
width:100px;
background-color:#ECFFE5;
}
table th.column3, table td.column3{
width:60px;
background-color:#FFEBE5;
}
table th.column4, table td.column4{
width:100px;
background-color: #FFFFCC;
}
div#tablecontainer
{
width: 328px;
}
div.tablecontainerrow
{
clear:both;
}
div#tablecontainer div div.column1
{
width: 60px;
float:left;
border: 1px solid black;
background-color:#CCD9FF;
}
div#tablecontainer div div.column2
{
width: 100px;
float:left;
border: 1px solid black;
background-color:#ECFFE5;
}
div#tablecontainer div div.column3
{
width: 60px;
float:left;
border: 1px solid black;
background-color:#FFEBE5;
}
div#tablecontainer div div.column4
{
width: 100px;
float:left;
border: 1px solid black;
background-color:#FFFFCC;
}
</style>
</head>
<body>
<h1>CSS and TABLE</h1>
<table>
<tr>
<th class="column1">Header 1</th>
<th class="column2">Header 2</th>
<th class="column3">Header 3</th>
<th class="column4">Header 4</th>
</tr>
<tr>
<td class="column1">line 1 column 1</td>
<td class="column2">line 1 column 2</td>
<td class="column3">line 1 column 3</td>
<td class="column4">line 2 column 4</td>
</tr>
<tr>
<td class="column1">line 2 column 1</td>
<td class="column2">line 2 column 2</td>
<td class="column3">line 2 column 3</td>
<td class="column4">line 2 column 4</td>
</tr>
<tr>
<td class="column1">line 3 column 1</td>
<td class="column2">line 3 column 2</td>
<td class="column3">line 3 column 3 (more content)</td>
<td class="column4">line 3 column 4</td>
</tr>
</table>
<h1>CSS and DIV</h1>
<div id="tablecontainer">
<div class="tablecontainerrow">
<div class="column1">Header 1</div>
<div class="column2">Header 2</div>
<div class="column3">Header 3</div>
<div class="column4">Header 4</div>
<div class="clear" />
</div>
<div class="tablecontainerrow">
<div class="column1">line 1 column 1</div>
<div class="column2">line 1 column 2</div>
<div class="column3">line 1 column 3</div>
<div class="column4">line 1 column 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 2 column 1</div>
<div class="column2">line 2 column 2</div>
<div class="column3">line 2 column 3</div>
<div class="column4">line 2 column 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 3 column 1</div>
<div class="column2">line 3 column 2</div>
<div class="column3">line 3 column 3 (more content)</div>
<div class="column4">line 3 column 4</div>
</div>
</div>
</body>
</html>
Что я могу изменить, чтобы макет CSS/DIV напоминал CSS/таблицу?
Некоторая дополнительная информация
- Подумайте, как упражнение (вызов). Поэтому, пожалуйста, не давайте мне ответов, говоря, что использование таблицы является лучшим решением для этой ситуации.
- На самом деле я задаюсь вопросом, какое решение может полностью изменить табличное расположение данных на другое, просто изменив CSS. В этом случае использование
<table>
не может быть и речи. - Я хочу совместимость с IE 7+, FF3 +, Chrome 4 +.
Спасибо!
Ответы
Ответ 1
Опять же, вы должны использовать таблицу.
Но если это всего лишь упражнение в CSS, для пинков...
- Поверните
<div class="clear" />
.
- Отключите цвета фона и вместо этого используйте faux-columns.
- Не устанавливайте границы вокруг отдельных ячеек; вместо этого разместите их вокруг строк.
- Дайте строкам a
overflow:hidden
Так же: http://jsfiddle.net/39F88/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Teste</title>
<style type="text/css">
table{
table-layout:fixed;
width: 333px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
table th, table td
{
border-width: 1px;
padding: 1px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
table th.column1, table td.column1{
width:60px;
background-color:#CCD9FF;
}
table th.column2, table td.column2{
width:100px;
background-color:#ECFFE5;
}
table th.column3, table td.column3{
width:60px;
background-color:#FFEBE5;
}
table th.column4, table td.column4{
width:100px;
background-color: #FFFFCC;
}
div#tablecontainer
{
width:335px;
border-top:1px solid black;
background:url(http://i.stack.imgur.com/ZsO5U.png) TOP LEFT REPEAT-Y;
}
div.tablecontainerrow
{
clear:both;
overflow:hidden;
border:1px solid black;
border-top:none;
}
div#tablecontainer div div.column1
{
width: 62px;
float:left;
}
div#tablecontainer div div.column2
{
width: 104px;
float:left;
}
div#tablecontainer div div.column3
{
width: 62px;
float:left;
}
div#tablecontainer div div.column4
{
width: 104px;
float:left;
}
</style>
</head>
<body>
<h1>CSS and TABLE</h1>
<table>
<tr>
<th class="column1">Header 1</th>
<th class="column2">Header 2</th>
<th class="column3">Header 3</th>
<th class="column4">Header 4</th>
</tr>
<tr>
<td class="column1">line 1 column 1</td>
<td class="column2">line 1 column 2</td>
<td class="column3">line 1 column 3</td>
<td class="column4">line 2 column 4</td>
</tr>
<tr>
<td class="column1">line 2 column 1</td>
<td class="column2">line 2 column 2</td>
<td class="column3">line 2 column 3</td>
<td class="column4">line 2 column 4</td>
</tr>
<tr>
<td class="column1">line 3 column 1</td>
<td class="column2">line 3 column 2</td>
<td class="column3">line 3 column 3 (more content)</td>
<td class="column4">line 3 column 4</td>
</tr>
</table>
<h1>CSS and DIV</h1>
<div id="tablecontainer">
<div class="tablecontainerrow">
<div class="column1">Header 1</div>
<div class="column2">Header 2</div>
<div class="column3">Header 3</div>
<div class="column4">Header 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 1 column 1</div>
<div class="column2">line 1 column 2</div>
<div class="column3">line 1 column 3</div>
<div class="column4">line 1 column 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 2 column 1</div>
<div class="column2">line 2 column 2</div>
<div class="column3">line 2 column 3</div>
<div class="column4">line 2 column 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 3 column 1</div>
<div class="column2">line 3 column 2</div>
<div class="column3">line 3 column 3 (more content)</div>
<div class="column4">line 3 column 4</div>
</div>
</div>
</body>
</html>
Ответ 2
Использование таблиц в макетных страницах не очень профессионально, но использование таблиц для отображения таблиц в порядке - это то, для чего они должны использоваться. Эмулирование таблиц с использованием div и css слишком сильно приближает css.
Ответ 3
Это ужасный ответ, я не могу поверить, что я даже предлагаю его, НО, если вы чертовски настроены сделать таблицу из div...
Как указано в комментариях, если это таблица, используйте таблицу, таблицы не являются злыми, они просто были чрезмерно использованы в свое время, чтобы делать то, для чего они не были предназначены. Они предназначены для отображения табличных данных, поэтому, если вы можете, используйте их.
Это предлагается только в том случае, если вы ДОЛЖНЫ сделать таблицу с divs
В CSS есть малоизвестное свойство отображения, которое поможет вам в этом, читайте здесь: table-cell css.
Опять же, просто используйте таблицу, если сможете.
Ответ 4
Если вы представляете табличные данные (несколько атрибутов нескольких похожих объектов, а также табличные данные), используйте тег <table>
Ответ 5
div#tablecontainer
{
width: 328px;
display:table;
}
div.tablecontainerrow
{
display:table-row;
}
div.tablecontainerrow div{
display:table-cell;
vertical-align:middle;
}
Конечно, я думаю, что большинство современных браузеров справляются с этим, за исключением MSIE...
Ответ 6
Насколько я знаю, единственный способ обойти это - явно указать высоту ваших "столбцов", иначе divs будет по умолчанию height: auto и будет только размером с контент внутри них. Установка высоты может быть опасной, если у вас есть контент, для которого требуется больше места, чем позволяет высота.
Ответ 7
Супер раздражающая проблема, просто появилась на работе. Обычно я использую фон для решения этой проблемы, но так как все должно быть отзывчивым, сейчас раздражает делать изображения для каждого запроса СМИ. Это единственный раз, когда я буду использовать JavaScript для достижения того, чего хочу. Глупо, что он не поддерживается.
HTML:
<ul class="table-layout clearfix">
<li>
<p>Header 1</p>
<p>Header 1</p>
<p>Header 1</p>
<p>Header 1</p>
<p>Header 1</p>
<p>Header 1</p>
</li>
<li>
<p>Header 1</p>
</li>
<li>
<p>Header 1</p>
</li>
</ul>
JavaScript:
$(document).ready(function(){
var height = 0;
$(".table-layout li").each(function(i){
if($(this).height() > height)
height = $(this).height();
});
$(".table-layout li").css("height", height + 'px');
});
CSS
/**
* Markup free clearing.
*
* @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .clearfix {
height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
min-height: 1%;
}
ul, li{
margin:0;
padding:0;
list-style-type:none;
}
ul{
width:335px;
overflow:hidden;
}
ul li{
width: 31.5%;
float:left;
border:1px solid #000;
margin-right:4px;
}
http://jsfiddle.net/kXrn5/6/
Ответ 8
Здесь моя попытка. Это, наверное, не идеально, но это начало. Для меня он работает над новейшими браузерами Chrome, Firefox, Safari, Opera, IE10 и
IE9. Извините, у меня нет IE7 для тестирования. Я сомневаюсь, что это работает, поскольку IE7 трудно справиться.
http://jsfiddle.net/nluis3294/uLuof882/
Я думаю, мы все согласны с тем, что вы должны использовать таблицы для табличных данных и divs для не табличных данных. В идеальном мире я думаю, что все будут делать.
Тем не менее, также можно сказать, что я хочу, чтобы мои не табличные данные были выровнены в сетке, и что эти строки и столбцы должны растягиваться, как обычная таблица html. Это выбор дизайна, и он полностью легитимный. Вот где трудности лежат. Вы можете использовать таблицы, которые намного проще, но технически неправильно. Или вы можете использовать divs и должны полагаться на трюки, такие как фоновые изображения, а также столбцы faux и разделители, чтобы они выглядели как таблицы.
Использование искусственных столбцов для меня тоже не кажется "правильным". Если вы хотите изменить ширину столбца, вам нужно будет отредактировать фоновое изображение. И использование фонового изображения для установки цвета фона кажется мне странным. У меня есть подобные оговорки в отношении других трюков, таких как столбцы Psuedo, или трюки относительно отрицательных полей. В моем oppinion, они должны просто изменить css, чтобы позволить простой способ получить что-то, что выглядит как сетка без трюков.
<div class="testTable">
<div class="testRow">
<div class="testColumn1">
aa
</div>
<div class="testColumn2">
bb<br/>
bbb2
</div>
<div class="testColumn3">
cc<br/>
cccc2
</div>
<div class="testColumn4">
dddddd<br/>
dddddd
</div>
</div>
<div class="testRow">
<div class="testColumn1">
aa
</div>
<div class="testColumn2">
bb<br/>
bbb2
</div>
<div class="testColumn3">
cc<br/>
cccc2
</div>
<div class="testColumn4">
dddddd<br/>
dddddd
</div>
</div>
<div class="testRow">
<div class="testColumn1">
aaa aaa
</div>
<div class="testColumn2">
bb<br/>
bbb2<br/>
bbbbbbbbbbbbbbbbbbbb3
</div>
<div class="testColumn3">
cccccc<br/>
</div>
<div class="testColumn4">
ddddd<br/>
ddd
</div>
</div>
</div>
CSS
div.testTable{
width: 30%; display: table; table-layout: auto;
padding:0;
margin:0;
}
div.testRow{
display: table-row; width: 100%;
white-space: nowrap;
vertical-align:top;
padding:0;
margin:0;
}
div.testColumn1{
display: table-cell; height:100%; min-width: 25%; background-color: #CCD9FF;
vertical-align:top;
padding: 0.2em;
border: 1px solid black;
margin:0;
}
div.testColumn2{
display: table-cell; height:100%; min-width: 25%;background-color: #ECFFE5;
vertical-align:top;
padding: 0.2em;
border: 1px solid black;
margin:0;
}
div.testColumn3{
display: table-cell; height:100%; min-width: 25%;background-color: #FFEBE5;
vertical-align:top;
padding: 0.2em;
border: 1px solid black;
margin:0;
}
div.testColumn4{
display: table-cell; height:100%; min-width: 25%;background-color: #FFFFCC;
vertical-align:top;
padding: 0.2em;
border: 1px solid black;
margin:0;
}