CSS table 宽度 100% 并且 td 溢出隐藏，没有 td 宽度

Question

我有一个使用 100% 区域宽度的 table，它有一些隐藏了溢出的 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

当某些内容太大时，您无法真正使其相对于内容调整大小...因此您必须通过您选择的最大宽度方法来完成。如果您在需要限制的列上放置 class 可能会使它的大小相对更大，这将具有更大的内容。如果只有 2 列左右的内容将包含超大内容，则针对 tr 的特定子 td。否则将最大宽度应用于所有这些。

Answer 2

我不知道这是否是您想要的，但它就是。

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

将文本溢出应用到 p 标签。

table{
  width:100%;
}
td {
 max-width: 150px !important; 
 
}
td p{
 
 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><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>

Answer 3

所以...我正在尝试为此考虑一个合适的 JS 解决方案。这是一个需要改进的地方。如果有人看到这个并想改进它，请成为我的客人并在评论中让我知道。

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

table{
  width:100%;
  border-collapse: collapse;
}
td{
  border: solid 1px #000;
  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 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>

同样，这是为了好玩而写的。让我知道可以更改哪些内容以使其变得更好。

Answer 4

将近 5 年后，我仍然无法找到使用表格的完美解决方案，但我找到了使用网格及其列自动调整宽度的解决方法：

grid-template-columns: repeat(3, auto);

.grid{
    width:100%;
    display:grid;
    grid-template-columns: repeat(3, auto);
}
.grid div{
    /*max-width: 150px !important; */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 3px 5px;
}

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

CSS table 宽度 100% 并且 td 溢出隐藏，没有 td 宽度

CSS table width 100% and td overflow hidden with no td width

html

css

html-table

overflow