Question

是否可以使用CSS在两个不同的视觉上显示表格行？

e.g：

<table>
    <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
    </tr>
    <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
    </tr>
</table>

...显示为：

___________
| A1      |
| A2 | A3 |
-----------
| B1      |
| B2 | B3 |
-----------

Answer 1

你在ascii艺术中展示的结构并不是一般意义上的表格 - 你也可以使用嵌套div的结构。

如果您坚持使用表格执行此操作，则可以更改A1 / B1单元格的display和position模型，并设置固定宽度的表格和单元格，然后移动A1 / B1细胞。

Answer 2

您可以尝试使用display: block; float: left和固定宽度进行攻击，但之后会丢失常规表功能。

Answer 3

您可以使用

<tr>
<td colspan = "2">A1</td>
</tr>
<tr>
<td>A2</td><td>A3</td>
</tr>

我认为你的A，B等都是一个数组，所以你可以运行一个循环来产生你的行。如果您需要更通用的方法来分割事物，您可以计算给定行中有多少个单元格，并根据计数器的模数转到下一行。例如，如果要在每五个元素之后拆分行

<cfset i = 0>
  <cfloop array = #myarray# index = "col">
<tr>
<cfset i = i + 1>
<cfset j = i%5>  <!---this is i mod 5 --->
<td>#col# (or whatever is based on col) </td> 
<cfif j EQ 0>
</tr>
<tr>
</cfif>
</cfloop>

我意识到这对你眼前的问题来说可能为时已晚，但可能会帮助其他人。

Answer 4

或许阅读CSS3中的灵活方框（flexbox）布局：

http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/

http://caniuse.com/#feat=flexbox

Answer 5

您无法更改浏览器的表格渲染算法来执行此操作。使用CSS 无法实现这一点，这将与您的确切表结构一起使用。

您已经确定表格是您信息的最佳布局，这就是您的通话。该表中数据的确切结构也是您的调用，只要它在逻辑上有效。

话虽如此，我确实质疑这里表达的意图。如果你试图在视觉上暗示这两个单元格'确实'是一个单元格，那么你应该考虑在可能的情况下使这种关系显式化，可能与th和rowspan一致。你为什么要暗示这种与视觉代理的关系有意义，而不是非视觉代理？

如果是我的话，我会重新评估我的细胞结构。一旦您致力于表结构，您就会受到更具体的语义规则的约束。是的，演示和语义在技术上是分开的。但是当你试图在视觉上表达你的标签语义的相反时;而不是在视觉上表达有意义的东西时，非视觉上不明显。

是否可以使用CSS拆分HTML的行？<table> </table>

5 个答案: