Question

我一直在寻找制作表格的解决方案使用<table>元素，没有每行的 >

<tr> 元素必须表现得像 <td> ，并且继续使用 <td> s ，结果将是一个横向表，如下所示：

Tr 1 - Td1 Tr 2 - Td1 Tr 3 - Td1 Tr 4 - Td1 Tr 5 - Td1 Tr 6 - Td1
Tr 7 - Td1 Tr 8 - Td1 Tr 9 - Td1 Tr … - Td1 Tr … - Td1 Tr … - Td1

然后，如果页面调整大小，结果将是：

Tr 1 - Td1 Tr 2 - Td1 Tr 3 - Td1 Tr 4 - Td1
Tr 5 - Td1 Tr 6 - Td1 Tr 7 - Td1 Tr 8 - Td1
Tr 9 - Td1 Tr … - Td1 Tr … - Td1 Tr … - Td1

如何使用 CSS 实现？

Answer 1

得到了!!我在http://dev.w3.org/html5/html-author/charref

找到了答案

这是一个没有定义每行 <td> 的表格，因为每个“单元格”都是 <tr> ，如果你尝试调整窗口大小，每行更改单元格数。

他们使用这种小CSS风格来实现这一目标：

tr {display: inline-block;}

以下是inline-block的{{3}}，所有主流浏览器都支持它，因此它是一个简单易用的解决方案。

此外，提供display: block;到<td>个元素会使<td>行为像<tr>

以下是演示的小提琴：browser support

通过这种方式，表格 可以适应每个分辨率 。

我希望能为某人提供帮助。

Answer 2

tr 中的

文本而不是 td 在表格之外呈现

<table><tr>abcd</tr></table>

将输出

abcd
<table><tr></tr></table>

基本上你需要 div 块，显示设置为inline-block。

<div>content1</div><div>content2</div><div>content3</div><div>content4</div>
<style>
  div {
    display: inline-block;
    min-width: 100px;
    min-height: 100px;
    margin: 6px;
  }
</style>

JSFiddle：http://jsfiddle.net/ssreeram/wpnx202L/

如何创建一个只有CSS定义的每行单元格的表格

2 个答案: