Html 如何使用溢出：隐藏；文本溢出：省略号；在具有百分比宽度的表格内

我想有一个表，有一个百分比宽度和每列也将有一个百分比宽度。我想用css做溢出：隐藏；文本溢出：省略号；但在某些专栏中，它似乎对我不起作用

以下是我所拥有的：

<table style='width:50%;'>
    <thead>
    <tr>
        <td style='width:15%;'>column 1</td>
        <td style='width:15%;'>column 2</td>
        <td style='width:70%;'>column 3</td>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td style='border:1px solid red;'>
                <div style='overflow:hidden; text-overflow:ellipsis; white-space:nowrap;'>this is some data 1</div>
            </td>
            <td style='border:1px solid red;'>
                <div style='overflow:hidden; text-overflow:ellipsis; white-space:nowrap;'>this is some data 1</div>
            </td>
            <td style='border:1px solid red;'>No hiding</td>
        </tr>
    </tbody>
</table>

第1栏
第2栏
第3栏
这是一些数据1
这是一些数据1
不要躲藏

当页面变小时，第三列变小，而不是前两列显示省略号和收缩，正如我所预料的那样

这可能就是你要找的

有关“表格宽度算法”部分的更多信息，@

“使用固定表布局算法，列和表的宽度不受表单元格内容的控制。”相反，每列的宽度按如下方式确定：

• 宽度不为的列对象自动设置该列的宽度
• 第一行中的单元格（其宽度不是自动的）设置其所属列的宽度。如果单元格跨越多个列，则宽度将在列上分开
• 任何剩余的列都会等分剩余的水平空间，减去任何边框或单元格间距。”

---

我知道这很简单。可悲的是，我在过去了解了table layout属性，却忘记了它。谢谢你。@Mike别担心。我经常忘记我很少使用的CSS属性：P

table {
    table-layout:fixed;
}