将单元格文本更改为更长的文本时保持单元格宽度，而不使用 table-layout:fixed

Question

我使用以下 css 使每个表格列的宽度适合该列中最宽单元格的宽度（当然，在这种情况下我不能使用table-layout:fixed）：

.fit {
    white-space: nowrap;
    width: 1%;   
}

现在，我遇到了一个单元格内容可能会动态更改的情况，并且更改后的内容可能会更长。

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

例如，在以下示例中（here's 也是一个小提琴），当单击按钮并将最后一个单元格的内容更改为更长的文本时，我想保持最后一列的原始宽度：

$('#button').click(ChagneLastWord);

function ChagneLastWord() {
  var lastCell = $("#myTable tr").first().find("td").last();
  lastCell.text("loooooooooooooooooooooooooooooooooooooooooooooooong word");
}

table {
  width: 100%;
}

td {
    text-align: center; 
    vertical-align: middle;
    white-space: nowrap; 
}

.fit {
    white-space: nowrap;
    width: 1%;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button">ChangeLastWord</button>
<div id="tableWrapper">    
    <table id="myTable" class="fit">
      <tr>
        <td>some</td>
        <td>nice</td> 
        <td>word</td>
      </tr>
      <tr>
        <td>some</td>
        <td>nice</td> 
        <td>word</td>
      </tr>
    </table>
</div>

Answer 1

您是否尝试过使用 jquery 计算宽度（因为它是使用 % 动态设置的）并设置固定的最大宽度并添加溢出：隐藏和空白：nowrap 到“.fit td”？您还可以添加 text-overflow: ellipsis 以更好地切割文本。

$('#button').click(ChagneLastWord);
function ChagneLastWord() {
  var lastCell = $("#myTable tr").first().find("td").last();
  lastCell.text("loooooooooooooooooooooooooooooooooooooooooooooooong word");
}
var fit_width = $('.fit td').width();
$('.fit td').css('max-width', fit_width + 'px');

table {
  width: 100%;
}

td {
    text-align: center; 
    vertical-align: middle;
    white-space: nowrap; 
}

.fit {
    width: 1%;
    white-space: nowrap;
}
.fit td {
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button">ChangeLastWord</button>
<div id="tableWrapper">    
    <table id="myTable" class="fit">
      <tr>
        <td>some</td>
        <td>nice</td> 
        <td>word</td>
      </tr>
      <tr>
        <td>some</td>
        <td>nice</td> 
        <td>word</td>
      </tr>
    </table>
</div>

Answer 2

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

$('#button').click(ChagneLastWord);

function ChagneLastWord() {
  var lastCell = $("#myTable tr").first().find("td").last();
  width = lastCell.width();
  lastCell.html("<span>looooooooooooooooooooooooooooooooooooooong word</span>").children('span').attr("style","white-space: nowrap; width: "+width+"px; overflow:hidden; text-overflow:ellipsis; display:inline-block;");
}

table {
  width: 100%;
}

td {
    text-align: center; 
    vertical-align: middle;
    white-space: nowrap; 
}

.fit {
    white-space: nowrap;
    width: 1%;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">ChangeLastWord</button>
<div id="tableWrapper">    
    <table id="myTable" class="fit">
      <tr>
        <td><span>some</span></td>
        <td><span>nice</span></td> 
        <td><span>word</span></td>
      </tr>
      <tr>
        <td><span>some</span></td>
        <td><span>nice</span></td> 
        <td><span>word</span></td>
      </tr>
    </table>
</div>

当然，如果你把 CSS 改成类名会更好。

Answer 3

好吧，我认为您需要一个 div 作为您的助手，在 td 中根据您的需要具有特定的宽度/高度。

检查这个sn-p，希望对你有所帮助。

table, th, td {
  border: 1px solid #c1c1c1;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

/*
* Change the width/height as you want
* Keep it "overflow-y: scroll" to scroll vertfically, if you want to scroll it horizontally, change it to "overflow-x: scroll" , it depends on your needs
*/
table div {
  width: 300px;
  height: 50px;
  overflow-y: scroll;
}

<table>
  <thead>
    <tr>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
      </td>
    </tr>
  </tbody>
</table>

Answer 4

这应该可以在不使用额外 div 的情况下工作：

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

https://jsfiddle.net/hpd57u2h/

我在我的例子中编辑了你的代码只是为了让它更清楚，无论如何过程都是一样的。 我还要添加一个椭圆，以更好地向用户说明某些文本已被删除...

text-overflow: ellipsis; 

Answer 5

我认为您应该将 width 值从百分比转换为像素