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

最新推荐文章于 2022-11-16 18:41:37 发布

原创最新推荐文章于 2022-11-16 18:41:37 发布 · 1.7w 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

65 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#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></div>
<div></div>
</div>

用这组div实现三列布局，第一个div占固定宽度，后两个div平分剩下宽度。总么办？（不能再嵌套div了哦）
思路：要这三个div的后面两个是一个table的两个td就好了。因为第一个div 左浮动，后面两个div可以加display：table-cell属性将其转化为表格的td。然后设置td各占50%就ok了。
代码如下：

.content {
display: table-row;
background: red;
height: 200px;
}
.first {

float: left;
width: 500px;
height: 200px;
background:red;
}
.sss1{
display: table-cell;
background: blue;
width: 50%;
}
.sss2{
display: table-cell;
background: yellow;
width: 50%;
}

</style>
</head>
<body>
<div class="content">
<div class="first">12</div>
<div class="sss1">12</div>
<div class="sss2">12</div>
</div>
</body>
</html>

很可惜，失败，后面两列的宽度只有内容大小.因为table没有抢先固定宽度（别妄想将tr固定宽度，没用！）td设置50%是没有效的。
如果将td都改成5000px；效果出来了！

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">

/*@media screen and (max-width: 1960px){*/

.content {
display: table-row;
width: 500px;
background: red;
height: 200px;
}
.first {

float: left;
width: 500px;
height: 200px;
background:red;
}
.sss1{
display: table-cell;
background: blue;
width: 5000px;
}
.sss2{
display: table-cell;
background: yellow;
width: 5000px;
}

/*}*/

</style>
</head>
<body>
<div class="content">
<div class="first">456</div>
<div class="sss1">12</div>
<div class="sss2">12</div>
</div>
</body>
</html>