我的数据是标准表格数据,每个数据是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,他的团队.安只能在三个或三个以下的顶部移动,而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：
经过进一步测试,我发现使用CSS来构造div的行为与表格有同样的问题.如果行没有彼此相邻放置,而有些行代替嵌套,则它们不共享宽度数据.由于时间限制,我不得不转而使用预设宽度的div.
对于任何可能来的人来说,使用treeTables可能有一些可能性,但是我还没有测试出来,需要继续前进.
解决方法
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
