【发布时间】：2019-08-11 13:19:19
【问题描述】：
我正在尝试仅使用 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/Table？
一些补充信息
- 将此视为练习（挑战）。所以请不要给我回答说使用表格是这种情况的更好解决方案。
- 事实上，我想知道一种解决方案，它可以将数据的表格布局完全更改为另一种只需更改 CSS 的解决方案。在这种情况下，
<table>的使用是没有问题的。- 我希望兼容 IE 7+、FF3+、Chrome 4+。
谢谢！
【问题讨论】：
-
您要显示的表格是什么？如果是这样，请使用表格。
-
为什么？在语义上使用表格来存储表格数据被认为是一种最佳做法。
-
同意上面的海报，如果你展示的是一张桌子，那么一张桌子是有意义的。
-
只用一张桌子。但是对于这个问题：检查
display: tabledisplay: table-row等等...... -
@BrunoLM、@Michael、@matchew、@Jeremy、@thirtydot，要解释为什么使用 CSS 而不是表格，请参阅我在问题中添加的补充信息。
标签： css