html 行跨度未按预期运行答案

【问题标题】：html rowspan not behaving as expectedhtml 行跨度未按预期运行
【发布时间】：2013-04-02 23:21:57
【问题描述】：

我有一些应该很简单的 html，但由于某种原因，我无法让 rowspan 工作。它没有填充整个左侧列，而是仅占据其底部的一个单元格。我想得到这样的东西：

+----------+-----------+---------+
| label 1  | content 1 | label 2 |
|          +-----------+         |
|          | content 2 |         |
|          +-----------+         |
|          | content 3 |         |
|          +-----------+         |
|          | content 4 |         |
|          +-----------+         |
|          | content 5 |         |
+----------+-----------+---------+

但是我对下面的代码没有运气。 JSBIN.

<tr>
    <td rowspan="5">
        label one
    </td>
    <td>
        content 1
    </td>
</tr>
<tr>
    <td>
        content 2
    </td>
</tr>
<tr>
    <td>
        content 3
    </td>
</tr>
<tr>
    <td>
        content 4
    </td>
</tr>
<tr>
    <td>
        content 5
    </td>
    <td rowspan="5">
        label two
    </td>
</tr>

非常感谢。

【问题讨论】：

标签： html css html-table

【解决方案1】：

只是一个小的 html 更改：

<table border="1">


    <tr>
        <td rowspan="5">
            label one
        </td>
        <td>
            content 1
        </td>
      <td rowspan="5">
            label two
        </td>
    </tr>
    <tr>
        <td>
            content 2
        </td>
    </tr>
    <tr>
        <td>
            content 3
        </td>
    </tr>
    <tr>
        <td>
            content 4
        </td>
    </tr>
    <tr>
        <td>
            content 5
        </td>

    </tr>


</table>

【讨论】：

【解决方案2】：

试试看：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 <table border="1">


    <tr>
        <td rowspan="5">
            label one
        </td>
        <td>
            content 1
        </td>
      <td rowspan="5">
            label two
        </td>
    </tr>
    <tr>
        <td>
            content 2
        </td>
    </tr>
    <tr>
        <td>
            content 3
        </td>
    </tr>
    <tr>
        <td>
            content 4
        </td>
    </tr>
    <tr rowspan="5">
        <td>
            content 5
        </td>
    </tr>


</table>
</body>
</html>

【讨论】：

【解决方案3】：

将 vertical-align:top 添加到内联样式中，或设置一个类并执行相同操作。应该可以。

<td rowspan="5" style="vertical-align:top">

【讨论】：

垂直对齐不是问题。不过感谢您的观看。