<table> <tr> <th class="left-column">楼层号</th> <td></td> </tr> <tr> <th class="left-column">房间号</th> <td></td> </tr> <tr> <th class="left-column">楼层</th> <td></td> </tr> <tr> <th class="left-column">可住人数</th> <td></td> </tr> <tr> <th class="left-column">已住人数</th> <td></td> </tr> </table>将表格放置在一个box中并利用css设置合适的长宽要求左右两列的长度一致
时间: 2023-06-13 20:09:10 浏览: 53
可以使用以下HTML和CSS代码实现:
HTML代码:
```html
<div class="box">
<table>
<tr>
<th class="left-column">楼层号</th>
<td></td>
</tr>
<tr>
<th class="left-column">房间号</th>
<td></td>
</tr>
<tr>
<th class="left-column">楼层</th>
<td></td>
</tr>
<tr>
<th class="left-column">可住人数</th>
<td></td>
</tr>
<tr>
<th class="left-column">已住人数</th>
<td></td>
</tr>
</table>
</div>
```
CSS代码:
```css
.box {
width: 500px;
height: 200px;
border: 1px solid black;
overflow: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border: 1px solid black;
}
th.left-column {
width: 50%;
}
```
在上述代码中,我们首先将表格放置在一个名为“box”的div元素中,并为其设置宽度、高度、边框和滚动条。接着,我们设置表格的宽度为100%以占满整个box元素的宽度,并将表格的边框合并为一条线。最后,我们设置左列的宽度为50%,并为表格中的单元格设置了内边距、文本对齐和边框属性。这样就可以实现左右两列长度一致的表格了。