Question

我很困惑，无法在HTML中创建这样的表格：

我制作HTML：

<!DOCTYPE html>
<html>
<body>

<table style="width:100%" border="1">

<!-- Header -->
<tr>
<th rowspan="3">Name</th>
<th rowspan="3">Button</th>
</tr>
<tr>
<th colspan="2">Details</th> 
</tr>
<tr>
<th>First name</th> 
<th>Last Name</th>
</tr>

<!-- Content -->

<tr>
<td>Bonds</td>
<td><input value="click me!" type="button"/>    </td>
<td>James</td>
<td>Bonds</td>
</tr>

<tr>
<td>Mary</td>
<td><input value="click me!" type="button"/></td>
<td>Mary</td>
<td>Jane</td>
</tr>

</table>

</body>

但是，“按钮”列始终位于“名称”列的旁边，它不像我想要的那样。如何做到这一点？

Answer 1

您可以尝试这样的事情：

<!DOCTYPE html>
<html>
<body>

<table style="width:100%" border="1">

<!-- Header -->
<tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Details</th>
    <th rowspan="2">Button</th>
</tr>
<tr>
    <th>First name</th> 
    <th>Last Name</th>
</tr>

<!-- Content -->

<tr>
<td>Bonds</td>
<td>James</td>
<td>Bonds</td>
<td><input value="click me!" type="button"/>   </td>
</tr>

<tr>
<td>Mary</td>
<td>Mary</td>
<td>Jane</td>
<td><input value="click me!" type="button"/></td>
</tr>

</table>

</body>
</html>

Answer 2

您可以使用一些CSS使按钮填满整个TD ..看起来更好

 input { 
   width:96%;
   padding:0 2%; 
}

这是fiddle

如何制作一个包含两个rowspan列的HTML表？

2 个答案: