如何将<div>,<span>或列表显示为表格数据？

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

在这个例子中,拖动鲍勃也会拖着鲍勃的团队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中(并根据需要应用边框),但这意味着"表格"可能无法调整大小以最适合给定的信息.

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

PS我希望实际的问题不是太具体,即使我认为我为什么表不起作用的理由似乎有点过于具体.

编辑:

是否有某种方法可以使以下工作,以便仍然可以使用表？

<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;等.

关于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%;
}

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