Table布局width设置为百分比无效问题

最新推荐文章于 2024-08-05 00:42:25 发布

8427003

最新推荐文章于 2024-08-05 00:42:25 发布

阅读量1.6w

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq8427003/article/details/12526083

版权

在CSS3中，使用table布局时遇到width设为百分比无效的问题。解决方法是确保table元素有固定宽度。通过设置table的width为100%，或者在非table元素上使用display: table-cell并给予固定像素宽度，可以实现两列各占50%的效果。示例代码展示了如何在div元素中模拟table布局，并解决了width设置为百分比无效的状况。

摘要由CSDN通过智能技术生成

#Table布局width设置为百分比无效问题
###本来这个问题已经没有讨论的价值了，因为table布局是低效率，无语意化的。但是css3 支持display设置为table、table-cell、table-row等。所以现在依然可以用table来布局。

##说说问题所在：如果我们想用table来实现两列布局。两列宽度各占50%。

><table>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>

肯定是不行的。因为ble没有设置宽度。默认一行中所有td宽度之和。

所以要先设置table的宽度（别妄想将tr设置t宽度，没用！）。eg：
> <table width="100%"></table>

网上另有说法
> table-layout：fixed 改变布局哥觉得都是没必要的。主要是抢先固定table的宽度就行。

接下来看
<div>
<div></div>
<div><