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

fenyu8

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

阅读量4.1k

点赞数

分类专栏： Web前端文章标签： html Powered by 金山文档

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

本文链接：https://blog.csdn.net/fenyu8/article/details/128950423

版权

Web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>