自动调整单元格宽度以CSS中的内容溢出

我有下表，每个单元格内容宽度不同。我想要长旁边的nowrap和溢出。自动调整单元格宽度以CSS中的内容溢出

我试了一下it's这里提到：Why does overflow:hidden not work in a <td>?

但结果是所有的细胞得到相同的宽度，我需要的细胞，以适应内部内容，所以没有那么多的白色高腰内容较短的单元格中的空格（如复选框一）。

我不能应用div来代替，而且我不能将特定宽度应用于每个列，因为它是动态表，所以列的数量和内容可能会发生变化。

¿任何线索？

<html> 
    <head> 
    <style> 
    table { 
     width: 100%; 
    } 
    table td { 
     border: 1px solid #ccc; 
     max-width: 1px; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
    } 
    </style> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td> 
      <input type="checkbox" /> 
     </td> 
     <td> 
      ID001 
     </td> 
     <td> 
      Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider- 
     </td> 
     </tr> 
    </table> 
    </body> 
</html>

来源

2017-05-04 MaryGG

大小由适用于它的最大宽度划分。因为您已将所有列的最大宽度设置为1px，所以列的大小相同，这就是为什么您有三个相等宽度的列。如果你的长文本总是在你的最后一列，你可以给它一个更大的尺寸 - 例如https://jsfiddle.net/qfsoo4wv/2/ - 如果复选框在第一个，你可以使这个更小：https：//jsfiddle.net/qfsoo4wv/3/但它意味着所有共享大小的列将是相等的宽度 – Pete

谢谢皮特，这就是我的问题，最后一列不会总是最大的一个，也不会是第一个总是放置一个复选框。我认为没有适当的解决方案对我:( – MaryGG

我有同样的情况下，你有任何工作解决方案??? – Kowsalya

-1

table { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 

 
table td:nth-of-type(1) { 
 
    width: 20px; 
 
    padding: 5px 0; 
 
} 
 
table td:nth-of-type(2) { 
 
    width: 100px; 
 
} 
 
table td { 
 
    border: 1px solid #ccc; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    padding: 5px 10px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td> 
 
     ID001 
 
    </td> 
 
    <td> 
 
     Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider- 
 
    </td> 
 
    </tr> 
 
</table>

来源

2017-05-04 14:23:04

谢谢，尼克，我已经尝试过，但正如我所说我不想给特定宽度任何列，因为这些colums可能会有所不同内容。我想宽度自动调整到内部的内容。 – MaryGG

OP已明确指出：*我不能应用特定宽度到每列，因为是一个动态表* – Pete

自动调整单元格宽度以CSS中的内容溢出

回答

相关问题