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

问题描述：

我有一个表使用100％的区域宽度，它有一些td与溢出隐藏，我需要的是使文本省略号，当文本太长。CSS表格宽度100％和td溢出隐藏没有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{ 
 
\t /*max-width: 150px !important; */ 
 
\t text-overflow: ellipsis; 
 
\t white-space: nowrap; 
 
\t 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>

预先感谢您的帮助！

我不知道你有没有找到你想要的东西，但是如果没有，请给出一个例子，说明你想要结果的样子（通过图片或硬编码的例子） –

答

当某些内容太大时，您无法真正地将其设置为相对于内容的大小。因此，您必须使用所选的最大宽度方法进行设置。如果你在需要被限制的列上放置一个类，那么可能会使它的大小相对较大，而这些列会有更大的内容。如果只有2列左右的内容过大，则定位tr的特定孩子td。否则，将最大宽度应用于它们全部。

它不是一个特定的列，每个单元格可以更长，类似于PHPMyAdmin如何剪切文本，但它不使用CSS，而是使用PHP。 – stramin

您可以将其设置为表格布局：固定宽度为100％;这将使每列的宽度和响应仍然相同，并且它会使用当前代码执行省略号。那么你不必为列设置一个特定的宽度。你可以添加更多的列而不必重新计算宽度。 –

我试过了，好像是table-layout：fixed;使所有colums相同的宽度，他们不会更大或更小取决于内容:( – stramin

答

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

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

应用文本溢出到p标签。

table{ 
 
    width:100%; 
 
} 
 
td { 
 
\t max-width: 150px !important; 
 
\t 
 
} 
 
td p{ 
 
\t 
 
\t text-overflow: ellipsis; 
 
\t white-space: nowrap; 
 
\t 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>

答

所以...我想认为这一个体面的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>

再次，这是为它的乐趣写。让我知道什么可以改变，使其更好。

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

相关推荐