Question

我想使用DIV制作可扩展的100％表格。我不想用于显示：table或display：table-cell，因为这不适用于IE7。目标是尽可能使其符合跨浏览器标准。

<div class="Wrapper">
    <div class="Row">
        <div class="Cell">1</div>
        <div class="Cell">2</div>
        <div class="Cell">3</div>
    </div>
    <div class="Row">
        <div class="Cell">4</div>
        <div class="Cell">5</div>
        <div class="Cell">6</div>
    </div>
</div>

如果可能的话，我想让单元格宽度自动，所以如果我添加更多单元格，它将完美地适合行，而不会将单元格推到第二行。一直想弄清楚这一点。任何帮助都是极好的。感谢

Answer 1

您可以为细胞提供100 /细胞数量％的宽度。但是如果你想让它自动调整到你需要javascript的单元格数。

但我无法真正获得你用div制作表格的优势。

Answer 2

我认为重新制作表格（页眉，页脚和群组怎么样？）并不是一个好主意。您可以使用100％宽度（因此它适用于90％的浏览器）和IE7的条件包含，使用CSS解决方法（锚点？）为那些仍在使用IE7的人修补它们。

Answer 3

像： http://linuxandfriends.com/2009/04/04/how-to-style-div-elements-as-tables/ 但是为了什么？

Answer 4

我最近这样做了，即使对于表格数据，我也想挑战自己使用ul和li来展示它。您可以模拟ul和li作为行和列。

请考虑以下事项：

<ul id="column-one">
  <li>Cell #1</li>
  <li>Cell #2</li>
  <li>Cell #3</li>
</ul>
<ul id="column-two">
  <li>Cell #1</li>
  <li>Cell #2</li>
  <li>Cell #3</li>
</ul>

<强> CSS

ul { list-style: none; }
  ul li { height: 20px; }
#column-one,
#column-two {
  float: left;
  position: relative;
  width: 50%;
}

如果您需要效仿colspan：

.span-4 {
  clear: left;
  float: left;
  position: relative;
  width: 100%; /* if you have 4 UL elements */
}

如果细胞高度不同，你会遇到问题。您可以创建“rowspan”类，这将增加height。

这完全取决于你。我一直支持在<table>内显示表格数据，但如果您想挑战自己，请这样做！

使用DIV创建表

4 个答案: