table 中，如何使得单元格的内容不换行，单元格不被撑开，显示不下的时候在结尾处显示“...”

本文链接：https://blog.youkuaiyun.com/u011199063/article/details/67632365

本文介绍了一种在表格中处理长内容的方法，通过设置CSS样式实现单元格内容的自动换行和省略显示，保持表格整体布局不变。此外，还提供了一个示例，展示了如何在页面缩放时保持部分列宽固定。

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

之前的项目做过这种需求，但是由于不是自己亲手实现，所以以为只要使用 text-overflow 就可以实现这个需求了。但实事证明并没有那么简单。下面就把这个需求的实现要点理一下。

先说一下几个要点：

table 的 “table-layout”属性要声明为“fixed”
对表格的第一行中的每个单元格设置宽度。我用的是数值，不是百分比。
对可能出现内容很长的单元格，设置以下三个属性：

Css代码  

overflow: hidden;  

white-space: nowrap;  

text-overflow: ellipsis;

好了，就这么多了。下面上代码：

Html代码  

<!DOCTYPE html>  

<html>  

<head>  

<meta charset="utf-8" />  

<style>  

    .dataTable {  

        width: 100%;  

        border: none;  

        border-collapse: collapse;  

        border-spacing: 0px !important;  

        display: table;  

        table-layout:fixed;  

    }  

    .dataTable th,.dataTable td {  

        padding: 0px;  

        margin: 0px;  

        border: 1px solid #BEBFD3;  

        overflow: hidden;  

        white-space: nowrap;  

        text-overflow: ellipsis;  

    }  

    #col1 {  

        width: 70px;  

    }  

    #col2 {  

        width: 220px;  

    }  

    #col3 {  

        width: 300px;  

    }  

    #col4 {  

        width: 180px;  

    }  

</style>  

<body>  

    <table class="dataTable">  

        <thead>  

            <tr>  

                <th id="col1">Header1</th>  

                <th id="col2">Header2></th>  

                <th id="col3">Header3</th>  

                <th id="col4">Header4</th>  

            </tr>  

        </thead>  

        <tbody>  

                <tr>  

                    <td>content1</td>  

                    <td>content2content2content2content2content2content2content2content2content2content2content2content2content2content2content2</td>  

                    <td>content3</td>  

                    <td>content4</td>  

                </tr>                  

                <tr>  

                    <td>content1</td>  

                    <td>content2</td>  

                    <td>content3content3content3content3content3content3content3content3content3content3content3content3content3content3content3</td>  

                    <td>content4</td>  

                </tr>  

        </tbody>  

    </table>  

</body>  

</html>

代码见附件，可以运行看看效果。

另外，如果想在页面放大缩小的过程中，保持某几个列的宽度不变，其他列的宽度自动进行计算的话，可以采用以下的方案：

Html代码  

.col1{  

    width: 60%;  

}  

.col2{  

    width: 40%;  

}  

.col13{  

    width: 200px;  

}

以上表示，表格共有三列，其中，第三列的宽度被固定为了 200px，所以在表格放大缩小的过程中，它的宽度始终保持为 200px，但是表格剩下的宽度将被分配给第一列和第二列，这两列将以 3：2 的比例瓜分剩下的宽度。

打个比方，表格在放大或者缩小之后，它的的宽度为300px，那么这个时候，表格的三列的宽度将分别为：

Txt代码  

60px  

40px  

200px