Question

我想在一行中创建一个包含子行的简单html表。它看起来像这样;

棘手的部分是将第3列分为2行row 1和Row 2。 html代码如何实现这样的表？

Answer 1

使用rowspan

<table border=1>
    <tr><td rowspan=2>1</td><td rowspan=2>Main</td><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
</table>

Answer 2

试试这个：

System.in

Answer 3

您可以使用两个div来模拟最后一列中的两行：

＆＃13;

table {
  border-collapse: collapse;
  width: 50%;
  height: 50%;
}

th, td {
    border: 1px solid black;    
}

td .test {
	border-bottom: 1px solid black;
}

＆＃13;

<table>
    <tr id="row1">
        <td>a
        </td>
        <td>b
        </td>
        <td>
        	<div class="test">Test</div>
            <div>Test</div>
        </td>
    </tr>    
</table>

＆＃13;

Answer 4

即使是嵌套表也可能有所帮助：

<table>
    <tr>
        <td>Hi</td>
        <td>
            <table>
                <tr>
                  <td>
                    How
                  </td>
                </tr>
                <tr>
                  <td>
                    When
                  </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Nested Tables Fiddle

使用html创建行中的子行

4 个答案: