Question

我有一个使用100％区域宽度的表，并且它有一些隐藏溢出的td，我需要的是当文本太长时使它们的文本省略。

我可以使用固定的td尺寸来做，但我需要使它们相对于内容

这个问题是3年前在这里提出的：CSS: 100% width table, with cells that have hidden overflow and irregular/minimal cell widths

没有回应，我想现在是否可能。

这是关于jsFiddle的一个例子：https://jsfiddle.net/gd1fogee/

这是一个片段：

table{
  width:100%;
}
td{
	/*max-width: 150px !important; */
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
      padding: 3px 5px;
}

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td>this is a very very long text to show what i want to achieve</td><td>two</td><td>three</td>
  </tr>
</table>
</div>

提前感谢您的帮助！

Answer 1

我不知道这是不是你想要的，但在这里。

https://jsfiddle.net/Tanikimura/4vypvwcn/

将文本溢出应用于p标记。

＆＃13;

table{
  width:100%;
}
td {
	max-width: 150px !important; 
	
}
td p{
	
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
      padding: 3px 5px;
}

＆＃13;

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td><p>this is a very very long text to show what i want to achieve</p></td><td>two</td><td>three</td>
  </tr>
</table>
</div>

＆＃13;

Answer 2

当某些内容太大时，您无法确定相对于内容的大小...所以您必须通过您选择的最大宽度方法来实现。如果你把一个类放在需要限制的列上，那么它可能会使它的大小更大，这将具有更大的内容。如果只有2个左右的列具有超大内容，则定位tr的特定子td。否则将max-width应用于所有这些。

Answer 3

所以......我试图为此考虑一个不错的JS解决方案。但是，这需要改进。如果有人看到这个并希望改进它，请成为我的客人并在评论中告诉我。

＆＃13;

const table = document.getElementsByTagName('table')[0];

shrinkCells(table, .75);

function shrinkCells(tbl, maxWidth) {
  // Check if it fits within the parent
  if (tbl.offsetWidth <= tbl.parentElement.offsetWidth || maxWidth < .2) {
    return tbl;
  }
  // set the maxWidth for every element that is bigger than the current maxwidth
  Array.from(table.getElementsByTagName('td')).forEach(function (el) {
    if (el.offsetWidth > (tbl.offsetWidth * maxWidth))
      el.style.maxWidth = (tbl.offsetWidth * maxWidth) + "px";
  });
  
  shrinkCells(tbl, maxWidth - .05);
}

＆＃13;

table{
  width:100%;
  border-collapse: collapse;
}
td{
  border: solid 1px #000;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 3px 5px;
}

＆＃13;

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td>this is a very very long text to show what i want to achieve asdhudfaslkjdfhdf asdf asdfasdfa asdf asdfasdf asdf a</td><td>two asdf asd fasd fasd fradfsddf asdf asdf asd fdsaf</td><td>three</td>
  </tr>
</table>
</div>

＆＃13;

同样，这是为了它的乐趣而写的。让我知道可以改变什么来改善它。

CSS表格宽度100％，td溢出隐藏，没有td宽度

3 个答案: