Я пытаюсь смоделировать таблицу, используя только CSS и DIV. Проблема в том, что ничто из того, что я делаю, не может идеально имитировать поведение макета таблицы.
Ниже приведен макет таблицы, который я хочу, и сразу под ним, чего я могу добиться с помощью CSS/DIV:
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+.
Спасибо!
display: tabledisplay: table-rowи так далее... - person BrunoLM schedule 10.06.2011"I´m trying to simulate a table using only CSS and DIV."- почему? - person thirtydot schedule 10.06.2011"For the sake of compatibility I want to use CSS 2.1.", но какие фактические браузеры/версии вам нужно поддерживать? - person thirtydot schedule 10.06.2011complementary information. Спасибо. - person outlookrperson schedule 10.06.2011"what about the situation in which a tabular data view is only one among several other presentation layouts that can be choosen"- как изменился макет презентации? Это что-то на стороне сервера или вы используете JavaScript для изменения представления на стороне клиента? Я спрашиваю, потому что если вы используете JavaScript, то его также можно использовать для исправленияheightвашихdiv. - person thirtydot schedule 10.06.2011table) для каждого макета/скина. Либо сделайте это, либо откажитесь от поддержки IE7 и используйте свойстваdisplay: table-cell. - person thirtydot schedule 10.06.2011