11

伙计们，我是一名程序员，当我需要添加一些看起来像表格的东西并使用 html 表格时，我总是会被我的网页设计师同事打脸。如何为 div 构建一个通用的 html div 结构，这样我就可以拥有它并在需要看起来像表格的东西时总是复制粘贴 html？

所以在这个表格html结构的情况下

<table>
 <tr><td></td><td></td></tr>
 <tr><td></td><td></td></tr>
 <tr><td></td><td></td></tr>
</table>

什么是类似的 div 结构？

4

4 回答 4

16

您将需要使用 display table、table-row和table-cell：

CSS：

.table
{
   display:table;
}

.table-row
{
   display:table-row;
}

.table-cell
{
   display:table-cell;
}

HTML：

<div class="table">
   <div class="table-row">
      <div class="table-cell">1</div>
      <div class="table-cell">2</div>
   </div>
   <div class="table-row">
      <div class="table-cell">3</div>
      <div class="table-cell">4</div>
   </div>
</div>

演示

请注意，tableIE7或更低版本不支持table-row、 和display 值，并且 IE8 需要 !DOCTYPE。table-cell

此外，表格应该用于表示表格数据，因为它为标记提供了比一堆带有类的 div 更多的语义含义。您只是不应该将表格用于布局目的。

于 2012-08-13T11:01:16.307 回答
8

如果您将 HTMLtable元素用于表格数据，那么我建议您回击您的网页设计师同行！

HTML 表格并不邪恶，table在显示表格数据时使用 HTML 是可以接受和推荐的。

http://webdesign.about.com/od/tables/a/aa122605.htm

于 2012-08-13T11:05:34.213 回答
4

为了简单起见，我将使用内联样式，但不建议在实际项目中使用它们：

<div style="overflow: hidden">
    <div style="width: 50%; float: left"></div>
    <div style="width: 50%; float: right"></div>
    <div style="width: 50%; clear: both; float: left"></div>
    <div style="width: 50%; float: right"></div>
</div>

这是众多解决方案之一。

该overflow: hidden位用于“自我清除”容器 div（没有它，div 将不会环绕其浮动子级）。第三个 div 清除两者的原因是它在自己的行上呈现。

编辑：由于 div 的宽度为 50%，因此无需将所有其他 div 浮动到右侧（您可以将它们全部浮动到左侧，并且看起来相同）但是如果您想要 div 之间的一些边距，您可以更改宽度并且所有其他 div 仍将向右对齐（如果它们都向左浮动，则情况并非如此）。

编辑：如果您实际上是在标记表格数据（正如一些评论所建议的那样），那么一定要坚持使用表格元素。这就是它的用途。您绝对不应该只从table,tr和tdto切换到div具有相同名称的类。

于 2012-08-13T11:00:29.087 回答
1

我建议使用一些布局，如 powerbuoy 建议的，但由于您希望在不同的场景中将结构调整为不同的大小，您可能希望在 CSS 中使用网格系统来集中设计布局。

.left { float:left; }
.right { float: right }
.onetenth { width: 10%; }
.onetwentieth { width: 5%; }

等等...

我向您保证，这种方法将大大减少您的样式，从而提高性能。

参见：https ://github.com/stubbornella/oocss/wiki/ （面向对象的 CSS）

于 2012-08-13T11:07:05.197 回答