调整桌子上的最后一列以适应内容，但不是第一个

我有一个可拖动/可调整大小的小部件，里面有一个HTML表格。该表包含2个（也许3个）列。第一个是客户名单。第二个是客户端类型列表。第三个（可选）是一个组首字母表。信息的字体大小也是可配置的，因此它可以更大或更小。调整桌子上的最后一列以适应内容，但不是第一个

我想在此表上显示（最佳方式）的一些信息。我正在尝试几种配置。最后一个是如下：

table { 
    table-layout:fixed; 
} 

table td { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}

而简短的HTML代码是：

<table> 
    <tbody> 
    <tr> 
     <td style="width:70%">1. DEPUTADA CRISTINA SILVESTRI</td> 
     <td stype="width:20%">Não Informou</td> 
     <td style="width:10%">PPS</td> 
    </tr> 
    <tr> 
     <td style="width:70%">2. DEPUTADO ANDRE BUENO</td> 
     <td stype="width:20%">Contra</td> 
     <td style="width:10%">PDT</td> 
    </tr> 
    ... 
    </tbody> 
</table>

如果我试着像上面，第一列在最后得到一个空格，而第二和第三列将信息切割（带省略号）（请参阅第一张图片，名称为wrong.png）。我想要像第二个图像（称为ok.png）的结果。但是如果我有一个很大的名字（第一列），我希望它用一个省略号来削减70％，所以最后2列可以显示（见最后一幅图片，名为ok2.png）。最后，如果我有一张小桌子，我希望所有的信息都用ellisis显示，而不仅仅是第一列。我怎样才能做到这一点？

的图像：

来源

2017-10-09 aseolin

，可知该溶液[点击这里]（https://stackoverflow.com/a/20412246/1959257）（rmehlinger答案） – aseolin

-1

IMOE，当我有复杂的表的情况，我把每一个标记细胞内。拿比的div可以CLASSsified几乎所有需要的一切：

<tr><td class='column_a'><div>...</div></td><td class='column_b'><div>...</div></td></tr>

HIH，

来源

2017-10-09 19:58:46

-1

你需要设置最大宽度

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

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>1. DEPUTADA CRISTINA SILVESTRI</td> 
 
     <td>Não Informou</td> 
 
     <td>PPS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2. DEPUTADO ANDRE BUENO</td> 
 
     <td>Contra</td> 
 
     <td>PDT</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

来源

2017-10-09 20:07:36 AdityaDS

它不按预期工作。应该填充空格来优化它。查看https://imgur.com/a/mqjcb上的图片结果 – aseolin

调整桌子上的最后一列以适应内容，但不是第一个

回答

相关问题