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计算宽度（因为它动态设置为％）并设置固定的最大宽度并添加overflow：hidden和white-space：nowrap to＆＃34; .fit td＆＃ 34 ;?您还可以添加文本溢出：省略号以更好地剪切文本。

＆＃13;

$('#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');

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

$('#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;");
}

＆＃13;

table {
  width: 100%;
}

td {
    text-align: center; 
    vertical-align: middle;
    white-space: nowrap; 
}

.fit {
    white-space: nowrap;
    width: 1%;   
}

＆＃13;

<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>

＆＃13;

当然，如果用类名更改CSS会更好。

Answer 3

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

检查此代码段，希望这可以帮助您解决问题。

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

我认为你只需将宽度值从百分比转换为像素

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

5 个答案: