Css 将单元格文本更改为较长文本时保持单元格宽度，而不使用表格布局：固定

我使用以下css使每个表格列的宽度与该列中最宽单元格的宽度相匹配（当然，在这种情况下，我不能使用

表格布局：fixed

）：

现在，我有一个例子，一个单元格内容可能会被动态更改，而更改的内容可能比原始内容更长

在这种情况下，是否可以保持保存更改单元格的列的原始宽度？内容中“溢出”的部分应隐藏

例如，在下面的示例中（也是一个提琴），当单击按钮并且最后一个单元格的内容更改为较长的文本时，我希望保留最后一列的原始宽度：

$（“#按钮”）。单击（ChagneLastWord）；
函数ChagneLastWord（）{
var lastCell=$（“#myTable tr”）.first（）.find（“td”）.last（）；
text（“looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo；
}

表格{
宽度：100%；
}
运输署{
文本对齐：居中；
垂直对齐：中间对齐；
空白：nowrap；
}
.适合{
空白：nowrap；
宽度：1%；
}

最新消息
一些
美好的
单词
一些
美好的
单词

我想我找到了解决你问题的办法。您需要使用另一个元素限制表中TD的内容，然后使用javascript设置前面的宽度

$（“#按钮”）。单击（ChagneLastWord）；
函数ChagneLastWord（）{
var lastCell=$（“#myTable tr”）.first（）.find（“td”）.last（）；
宽度=lastCell.width（）；
html（“loooooong单词”）.children（'span'）.attr（“样式”，“空白：nowrap；宽度：“+width+”px；溢出：隐藏；文本溢出：省略号；显示：内联块；”；
}

表格{
宽度：100%；
}
运输署{
文本对齐：居中；
垂直对齐：中间对齐；
空白：nowrap；
}
.适合{
空白：nowrap；
宽度：1%；
}

最新消息
一些
美好的
单词
一些
美好的
单词

嗯，我想你需要一个

div

作为你在

td

中的助手，根据你的需要有一个特定的宽度/高度

查看这个片段，希望它能帮助你

表，th，td{
边框：1px实心#C1C1；
填充物：5px；
}
桌子{
边界塌陷：塌陷；
}
/*
*根据需要更改宽度/高度
*保持“overflow-y:scroll”垂直滚动，如果您想水平滚动，请将其更改为“overflow-x:scroll”，这取决于您的需要
*/
表分区{
宽度：300px；
高度：50px；
溢出y：滚动；
}

描述
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。

您是否尝试使用jquery计算宽度（因为它是动态设置的%），设置固定的最大宽度，并将溢出：隐藏和空白：nowrap添加到“.fit td”中？您还可以添加文本溢出：省略号以更好地剪切文本

$（“#按钮”）。单击（ChagneLastWord）；
函数ChagneLastWord（）{
var lastCell=$（“#myTable tr”）.first（）.find（“td”）.last（）；
text（“looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo；
}
var fit_width=$（'.fit td'）.width（）；
$（'.fit td'）.css（'max-width'，fit_-width+'px'）
表格{
宽度：100%；
}
运输署{
文本对齐：居中；
垂直对齐：中间对齐；
空白：nowrap；
}
.适合{
宽度：1%；
空白：nowrap；
}
.fit运输署{
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}

最新消息
一些
美好的
单词
一些
美好的
单词
这应该在不使用额外div的情况下工作：

table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
td {
    width: 25%;
}


我在我的示例中编辑了你的代码，只是为了让它更清楚，过程是一样的。
我还添加了一个椭圆，以便更好地向用户澄清一些文本已被删除

text-overflow: ellipsis; 

我想你应该把宽度值从百分比转换为像素
相关：你省略了
fit
类，因此错过了我问题的第一部分，我说我想“使每个表列的宽度适合该列中最宽单元格的宽度”。
text-overflow: ellipsis;