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

最新推荐文章于 2023-02-16 09:22:58 发布

rainbow702

最新推荐文章于 2023-02-16 09:22:58 发布

阅读量1.3k

点赞数

文章标签： html/css/table 不换行显示点点点 table-layout:fixed / text-overflow:ellipsis 某几列宽度固定_其它列按比例分配

本文链接：https://blog.csdn.net/rainbow702/article/details/84724533

版权

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

先说一下几个要点：

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

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

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

<!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>

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

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

.col1{
    width: 60%;
}

.col2{
    width: 40%;
}

.col13{
    width: 200px;
}

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

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

60px

40px

200px

rainbow702

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table 中，如何使得单元格的内容不换行，单元格不被撑开，显示不下的时候在结尾处显示“...”...

之前的项目做过这种需求，但是由于不是自己亲手实现，所以以为只要使用 text-overflow 就可以实现这个需求了。但实事证明并没有那么简单。下面就把这个需求的实现要点理一下。先说一下几个要点：table 的 “table-layout”属性要声明为“fixed”对表格的第一行中的每个单元格设置宽度。我用的是数值，不是百分比。对可能出现内容很长的单元格，设置以下三个属性：...
复制链接

扫一扫