table 固定表格宽度，设置列宽，超出内容省略号显示

fenyu8

已于 2023-02-09 11:55:56 修改

阅读量4.3k

点赞数

分类专栏： Web前端文章标签： html

于 2023-02-09 11:54:24 首次发布

本文链接：https://blog.youkuaiyun.com/fenyu8/article/details/128950423

版权

Web前端专栏收录该内容

15 篇文章

订阅专栏

该文章介绍了如何使用HTML和CSS来创建一个具有固定布局的表格，使其大小不会随内容变化。表格的`table-layout`属性设为`fixed`，宽度由第一行的`colgroup`和`col`标签定义。同时，通过设置`td`的样式，如`white-space:nowrap`,`overflow:hidden`,和`text-overflow:ellipsis`，可以实现单元格内超出内容的省略号显示。

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

1.table的属性able-layout：fixed，这会使表格大小不会因为内容变化而变化;

2.当表格table-layout为fixed时，其表格宽度由第一行决定，用colgroup配合col标签设置列宽；

3.td设置样式style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"，超出单元格的内容用省略号显示。

        <table id="datatable" border="0" style="width: 1280px;table-layout:fixed;">
            <colgroup >
                <col width="1">
                <col width="50">
                <col width="20">
                <col width="15">
                <col width="20">
                <col width="20">
                <col width="8">
                <col width="8">
            </colgroup>
            <caption>Email List</caption>
            <tbody>
                <tr id="record">
                    <td height="25px">&nbsp;</td>
                    <td style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" title="<%=dms.getSubject()%>"><%=dms.getSubject()%></td>
                    <td style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" title="<%=dms.getSender()%>">&nbsp;&nbsp;<%=dms.getSender()%></td>
                    <td>&nbsp;&nbsp;<%=sentDate%></td>
                    <td style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" title="<%=dms.getToRecipients()%>">&nbsp;&nbsp;<%=dms.getToRecipients()%></td>
                    <td style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" title="<%=dms.getCcRecipients()%>">&nbsp;&nbsp;<%=dms.getCcRecipients()%></td>
                    <td style="text-align: center">&nbsp;&nbsp;<%=dms.getHasAttachments()%></td>
                    <td class="update"><a href="dmsDownload.jsp?id=<%=dms.getId()%>" class="Icon">&nbsp;Download&nbsp;</a></td>
                </tr>
            </tbody>
        </table>