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

来源：互联网发布：中国象棋软件哪个好编辑：程序博客网时间：2024/06/08 13:11

之前的项目做过这种需求，但是由于不是自己亲手实现，所以以为只要使用 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，那么这个时候，表格的三列的宽度将分别为：

60px40px200px

table.zip (589 Bytes)
下载次数: 2

0 0