使用 DIV 创建表答案

【问题标题】：Create Table using DIV's使用 DIV 创建表
【发布时间】：2012-02-27 16:09:49
【问题描述】：

我想只使用 DIV 制作一个可扩展的 100% 表。我不想使用 to display: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>

如果可能的话，我想将单元格宽度设为自动，因此如果我添加更多单元格，它将完全适合该行，而无需将单元格推到第二行。一直试图弄清楚这一点。任何帮助都是极好的。谢谢

【问题讨论】：

如果这是表格数据，为什么不使用表格？
不要猜测您的问题，但您为什么要尝试使用<div>s 制作表格？你不能用<table>吗？
Joe，表格不利于布局，但不适合表格。试图用<div>s 模仿一个人是一种可怕的、注定失败的努力。
@Joe：你为什么要完全远离桌子？
IE7 的市场份额已经下降到 3% 左右，你真的想为一些不更新软件的怪人拉扯头发吗？他们得到了他们应得的。

标签： html css

【解决方案1】：

您可以将单元格的宽度设置为 100/单元格数量 %。但是，如果您希望它自动调整为单元格的数量，您将需要 javascript。

但我真的不明白你看到用 div 制作表格有什么好处。

【讨论】：

【解决方案2】：

我认为……重新发明表格不是一个好主意（页眉、页脚和组呢？）。您可以为 IE7 使用 100% 宽度（因此它适用于 90% 的浏览器）和条件包含，为仍在使用 IE7 的人使用 CSS 解决方法（锚点？）修补它们。

【讨论】：

这不是重新发明任何东西。承认它的 html 表格很糟糕。他们甚至在 tbody 上都没有滚动条。
@ArunAravind 我承认......它们不是我们可以想象用来显示数据的最佳工具！你可能（或多或少）总是得到你需要的行为，但你总是需要 JS 和技巧。烦人。
是的，我同意，但是让组件处于过度控制之下并没有什么坏处，而且您不需要任何复杂的脚本来维护它。很简单的事情。
@ArunAravind IMO 这取决于你必须做什么。例如，正如您所指出的，如果您不必滚动正文，那么我无法想象我会重新发明表格的情况。首先是因为（如果它不仅仅是一个练习）你需要实现很多东西；第二，因为除了表格+css+javascript之外你不会添加任何东西（需要处理很多浏览器差异）
表格很好，适用于静态数据或有限数量的数据。如果要渲染 1000 行数据并虚拟化表怎么办。

【解决方案3】：

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

【讨论】：

【解决方案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>内显示表格数据，但如果你想挑战自己，请这样做！

【讨论】：

我是否必须定义每个单元格的宽度，或者我可以如何使用 width:auto？当我在 100% 宽度的表格中有奇数个单元格时，这会变得很有挑战性
您的li 将继承ul 的宽度。