如何让<div>、<span>或list将表格数据显示为表格？

Question

首先，让我说我已经阅读了其他关于此的回复，并且我意识到对于表格数据，使用表格是最好的方法。我需要使用表格以外的东西的原因是因为我正在使用一个 jquery 插件（确切地说是 Jquery UI 可排序），它需要将某些数据行嵌套在其他数据行中。我不知道用表格来做这件事，因此我需要使用另一个元素（我目前正在使用 div）。

我的数据是标准表格数据，每条数据包含 1 个单元格。

Name  Address              
Bob   123 Main    edit_button  drag&drop_button
Joe   123 Fake    edit_button  drag&drop_button
Sue   456 Road    edit_button  drag&drop_button
Ann   123 Street  edit_button  drag&drop_button

在此示例中，拖动 Bob 也会将 Bob 的团队 Joe 和 Sue 与他一起拖动。 Ann 只能在三人之上或三人之下移动，而 Joe 和 Sue 只能互相交换位置。

在 html 中是这样的。

<div class="table">
    <div class="header">Header information</div>
    <div>
        <div class="row">Bob's information</div>
        <div>
            <div class="row">Joe's information</div>
            <div class="row">Sue's information</div>
        </div>
    </div>
    <div>
        <div class="row">Ann's information</div>
    </div>
</div>

据我所知，这种嵌套不能用表格完成。

我不需要使用 div，如果其他方法会更好的话。

我的问题基本上是如何让这些信息以表格格式显示？

目前，我最好的猜测是将每个数据元素（包括标题）放在具有固定宽度的 div 中（并根据外观需要应用边框），但这意味着“表格”可能无法调整大小以最适合给出的信息。

我所做的另一个尝试，可以说是更加混乱，是在每个“行”中，有一个具有相同设置的新表，其中包括一个不显示的标题。这几乎给出了我想要的外观，但如果名称不是确切的长度，一些间距会明显偏离。

附： 我希望实际问题不是太具体，即使我认为我对为什么表格不起作用的理由似乎有点太具体了。

编辑：

是否有某种方法可以使以下内容正常工作，以便仍然可以使用表格？

<table>
    <thead>table header stuff</thead>
    <tbody>
        <mtne*>
            <tr>Bob's information</tr>
            <mtne>
                <tr>Joe's information</tr>
            </mtne>
            <mtne>
                <tr>Sue's information</tr>
            </mtne>
        </mtne>
        <mtne>
            <tr>Ann's information</tr>
        </mtne>
    </tbody>
</table>

*mtne = 神话中的表格嵌套元素。

编辑 2：

经过进一步测试，我发现使 div 表现得像表格一样的 css 样式也有同样的问题。如果行没有彼此相邻放置，而有些行是嵌套的，则它们不共享宽度数据。由于时间限制，我不得不切换到使用预设宽度的 div。

对于可能出现的其他人，使用treeTables 时可能会有一些可能性，但我尚未对其进行测试，需要继续前进。

Answer 1

您可以使用 CSS 和 div 来模拟表格，例如 display:table;、display:table-row;、display:table-cell; 等。

---

​Working demo on jsFiddle

HTML：

<div class="table">
  <div class="header">
    <div class="cell">Name</div>
    <div class="cell">Address</div>
    <div class="cell">Action 1</div>
    <div class="cell">Action 2</div>
  </div>
  <div class="rowGroup">
    <div class="row">
      <div class="cell">Bob</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
  </div>
  <div class="rowGroup">
    <div class="row">
      <div class="cell">Joe</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
    <div class="row">
      <div class="cell">Sue</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
  </div>
  <div class="rowGroup">
    <div class="row">
      <div class="cell">Ann</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
  </div>
</div>

​CSS：

.table {
    display:table;
}
.header {
    display:table-header-group;
    font-weight:bold;
}
.rowGroup {
    display:table-row-group;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    width:25%;
}

---

Supported by IE8+（这是一个 CSS2.1 功能）

进一步阅读：

• www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
• www.onenaught.com/posts/201/use-css-displaytable-for-layout
• www.w3.org/TR/CSS21/tables.html#table-display

Answer 2

一种选择是您可以将table 嵌套在td 中：

JS Fiddle

<table>
  <thead>
    <tr>
      <th>Outer Table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob's information
        <table>
          <thead>
            <tr>
              <th>Inner Table</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Joe's information</td>
            </tr>
            <tr>
              <td>Sue's information</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>Ann's information</td>
    </tr>
  </tbody>
</table>

PS - 注意你的表格结构 - 你不能跳过 tds 或 ths。