html table 中的td中有多个div 对td进行flex布局
时间: 2023-10-13 15:14:03 浏览: 176
div对齐与网页布局详解
可以对包含多个div的td元素应用`display: flex`属性进行布局。同时,需要注意每个div元素的`flex-grow`、`flex-shrink`和`flex-basis`属性来控制它们在td元素中的占比。以下是一个示例代码:
```html
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #ddd;
padding: 10px;
display: flex;
}
.col {
flex: 1;
margin-right: 10px;
}
.col:last-child {
margin-right: 0;
}
</style>
<table>
<tr>
<td>
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
</td>
</tr>
<tr>
<td>
<div class="col">Col 1</div>
<div class="col">Col 2</div>
</td>
</tr>
<tr>
<td>
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</td>
</tr>
</table>
```
注意,上面的示例代码中使用了flex布局,`.col`元素的`flex: 1`属性表示它们应该平分td元素的宽度。如果需要调整每个col元素的占比,可以调整`flex`属性的值。同时,为了避免最后一个col元素右侧出现多余的空白间隔,可以为`.col:last-child`元素添加`margin-right: 0`样式。
阅读全文