嵌套表格属性设置:边框0,宽度100%,其中行属性设置,居中对齐,高度30px,宽度100%,类class(menu),内包裹单元格宽度各占20%。
时间: 2024-12-18 13:33:55 浏览: 6
转载未知大小的图片在一个已知大小容器中的水平和垂直居中(二)
嵌套表格的设置可以这样实现。首先,外层表格用来包含整个布局,然后内部的行用于创建子菜单项:
```html
<style>
.menu {
border: 0;
width: 100%;
}
.menu td {
display: inline-block;
vertical-align: middle;
height: 30px;
width: 20%;
}
</style>
<table class="menu">
<tr>
<td>菜单项1</td>
<td>菜单项2</td>
<!-- 根据需要添加更多列 -->
</tr>
<!-- 可以添加更多行 -->
</table>
```
在这个例子中,`.menu`类设置了边框为0,宽度为100%,并且使用`display: inline-block;`使得每个单元格(`td`)像行内元素一样并排显示。`vertical-align: middle;`确保了每个单元格在垂直方向上居中对齐,`height: 30px;`设定了行的高度,而`width: 20%;`则分配了20%的总宽度给每个单元格。
阅读全文