gpt4 book ai didi

html - 如何让
或list将表格数据显示为表格?

转载 作者:太空狗 更新时间:2023-10-29 13:07:50 36 4
gpt4 key购买 nike

首先,让我说一下,我已经阅读了其他对此的回复,并且我意识到对于表格数据,使用表格是最好的方法。我需要使用表格以外的东西的原因是因为我正在使用一个 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 时可能会有一些可能性,但我尚未对其进行测试并且需要继续。

最佳答案

您可以使用 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 的特性)

进一步阅读:

关于html - 如何让<div>、<span>或list将表格数据显示为表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12521209/

36 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com