HTML CSS table 固定列

• table-layout

fixed
表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。
使用 “fixed” 布局方式时，整个表格可以在其首行被下载后就被解析和渲染。这样对于 “automatic” 自动布局方式来说可以加速渲染，但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow 属性控制是否允许内容溢出。

• border-collapse

使用前

image.png

使用后

image.png

        table {
            border-collapse: collapse;
            table-layout: fixed;
        }

        td {
            border:1px solid black;
            word-break: break-word;
            width: 100px;
        }

省略号

        table {
            border-collapse: collapse;
            table-layout: fixed;
            width: 620px;
        }

        td {
            width: 120px;
            border: 1px solid #ddd;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

table 一定要有固长

image.png

又及：grid布局 父容器overflow:hidden使不受内容影响，子元素有可用scroll