设置了table-cell 属性后，用百分比来设置宽度为什么会出现问题

.right-content-title span{

            display: table-cell;
            width: 3.5%;
            text-align: center;
            height: 42px;
            vertical-align: middle;

}
加了这个display: table-cell属性后，width的意义是什么呢？

阅读 16k

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>test</title>
    <style>
    p { margin:0; }
    .right-content-title111 {border:1px solid black; width:400px; margin-top:15px;}
    .right-content-title111 span{
        border : 1px solid red;
        display: table-cell;
        width: 70%;
        text-align: center;
        height: 22px;
        vertical-align: middle;
    }
    .right-content-title222 {border:1px solid black; width:400px; margin-top:1px;}
    .right-content-title222 span{
        border : 1px solid red;
        display: table-cell;
        width: 40%;
        text-align: center;
        height: 22px;
        vertical-align: middle;
    }
    .right-content-title333 {border:1px solid black; width:520px; margin-top:1px;}
    .right-content-title333 span{
        border : 1px solid red;
        display: table-cell;
        width: 10%;
        text-align: center;
        height: 22px;
        vertical-align: middle;
    }
    </style>
</head>
<body>
    <p class="right-content-title111"><span>短</span></p>
    <p class="right-content-title222"><span>短</span></p>
    <p class="right-content-title333"><span>短</span></p>
    <p class="right-content-title111"><span>中中</span></p>
    <p class="right-content-title222"><span>中中</span></p>
    <p class="right-content-title333"><span>中中</span></p>
    <p class="right-content-title111"><span>长长长</span></p>
    <p class="right-content-title222"><span>长长长</span></p>
    <p class="right-content-title333"><span>长长长</span></p>
</body>
</html>

图片描述

结论就是table-cell里的width:3.5%，故意设置很小，目的是让table-cell占总容器100%宽

设置了table-cell 属性后，用百分比来设置宽度为什么会出现问题

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？