调整桌子上的最后一列以适应内容,但不是第一个
问题描述:
我有一个可拖动/可调整大小的小部件,里面有一个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显示,而不仅仅是第一列。我怎样才能做到这一点?
的图像:
答
IMOE,当我有复杂的表的情况,我把每一个标记细胞内。拿比的div可以CLASSsified几乎所有需要的一切:
<tr><td class='column_a'><div>...</div></td><td class='column_b'><div>...</div></td></tr>
HIH,
答
你需要设置最大宽度
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>
+0
它不按预期工作。应该填充空格来优化它。查看https://imgur.com/a/mqjcb上的图片结果 – aseolin
,可知该溶液[点击这里](https://*.com/a/20412246/1959257)(rmehlinger答案) – aseolin