html - 如何对多行复杂记录进行 HTML 布局?

标签 html css css-tables

我想显示复杂记录的列表,但尝试将其简单地放入表格中似乎效果不佳。

我想要这样的布局:

mockup

每条完整记录都可以放入一个表格单元格(每行一个单元格),然后我可以使用 <div>每个单元格中的标签。将 div 放入表格单元格中是否可能导致显示问题?无论如何它都可以简单地用 div 来完成,所以这也许是个坏主意。

在每条记录中,有相当多的组成部分。如果我用 div 布置它们,我需要做什么来确保每个标签/值对都在正确的位置?或者是否有更好的方法来确保布局一致?

显然,每条记录的值都会不同,因此为了保持一致的外观,我需要所有标签都垂直排列。

如果问题看起来有点含糊,那是因为我对如何做的理解含糊...即使有一些帮助澄清问题也会很棒!

最佳答案

在表格单元格中使用 div 没问题。应该不会引起问题。

虽然看着你的模型,但从语义上我会说它不是一张 table 。没有列、列标题等。

它看起来更像是一个包含更多详细信息的元素列表。

我会使用一个带有 li 和 div 的 ul 来进一步布局。

此外,如果您需要 ID 完全一样,您可以在每个 li 中使用图例元素。

关于html - 如何对多行复杂记录进行 HTML 布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10988795/

相关文章:

html - html中的相对链接?

html - 如何为 Onsen UI 页面设置背景颜色

html - 堆栈显示 :block, 但保留内部文本的宽度 - 这可能吗?

html - 无法摆脱 HTML 表格边框 - 使用屏幕截图和 jfFiddle

javascript - 验证对象数组中现有项目的输入字段?

php - 使用 PHP 按列搜索 CSV?

javascript - 一个 Bootstrap 行的溢出文本隐藏在另一行的文本后面

php - 在加载时为图像添加边距?

html - CSS 表格单元格不会变成全宽

css - 为 "padding-top"div 的内容设置 "table-cell"时的奇怪行为