table中td内容过长，使得td内容过宽

最新推荐文章于 2023-03-02 10:40:49 发布

言不由衷煦

最新推荐文章于 2023-03-02 10:40:49 发布

阅读量1.7k

点赞数 1

分类专栏： html DOM&CSS 文章标签： html

本文链接：https://blog.csdn.net/budongfengqing/article/details/108325726

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

DOM&CSS

1 篇文章 0 订阅

订阅专栏

table中div内容过长，用省略号代替

前言
参考文档
一、通用的table-layout:fixed
二、max-width来助攻
三、position 方案

前言

本来这只是一个小问题，但是由于项目的特殊需要所以查询了很多资料，这里就记录一下操作，方便后期复习。

参考文档

https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell

一、通用的table-layout:fixed

对于一些不需要动态调整表格宽度的话，那么这种方案无疑是最佳的解决方案（td中的内容无论多少都会以td的宽度为准，不会撑大td的宽度），但是需要对于动态调整列宽度的就比较蛋疼，因为它只以第一列的宽度为准(如果设置了第二列的td宽度，则不生效)

<head>
<style type="text/css">
	table.one{
		table-layout: automatic
	}
	table.two{
		table-layout: fixed;
	}
</style>
</head>
<body>
	<table class="one" border="1" width="500px">
		<tr>
			<td width="20%">1000000000000000000000000000</td>
			<td width="40%">10000000</td>
			<td width="40%">100</td>
		</tr>
		<tr>
			<td>1000000000000000000000000000</td>
			<td>10000000</td>
			<td>100</td>
		</tr>
	</table>

	<table id="table2" class="two" border="1" width="500px">
		<tr>
			<td width="20%">1000000000000000000000000000</td>
			<td width="40%">10000000</td>
			<td width="40%">100</td>
		</tr>
		<tr>
			<td>1000000000000000000000000000</td>
			<td>10000000</td>
			<td>100</td>
		</tr>
	</table>
</body>

效果如下：
效果图

结论：
使用table-layout:fixed可以让table中的td宽度不随内容长度而发生变化

弊端：
如果想要通过table的非第一行设置每个td的宽度则不会生效

二、max-width来助攻

td {
 max-width: 100px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

三、position 方案

<td class="ellipsis">
    <span>This Text Overflows and is too large for its cell.</span>
</td>

.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: '&nbsp;';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

言不由衷煦

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
table中td内容过长，使得td内容过宽

table中div内容过长，用省略号代替前言一、通用的table-layout:fixed前言本来这只是一个小问题，但是由于项目的特殊需要所以查询了很多资料，这里就记录一下操作，方便后期复习。一、通用的table-layout:fixed 对于一些不需要动态调整表格宽度的话，那么这种方案无疑是最佳的解决方案（td中的内容无论多少都会以td的宽度为准，不会撑大td的宽度），但是需要对于动态调整列宽度的就比较蛋疼，因为它只以第一列的宽度为准(如果设置了第二列的td宽度，则不生效)<head
复制链接

扫一扫