如何控制HTML表格列寬與文本溢出結合

鑑於下面的html表格，我想通過設置'col'元素的寬度而不是將其設置在div上來控制第一列的寬度元素，而不會丟失省略號。這只是使用HTML和CSS可能嗎？如何控制HTML表格列寬與文本溢出結合

<html> 
<head> 
<style> 
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } 
</style> 
</head> 
<body> 
<table style="width: 300px"> 
<col /><!-- ** set width here ** --> 
<tr> 
    <td>Column 1</td><td>Column 2</td> 
</tr> 
<tr> 
    <td> 
    <div class="hideextra" style="width:200px"> 
       this is the text in column one which wraps</div></td> 
    <td> 
     <div class="hideextra" style="width:100px"> 
       this is the column two test</div></td> 
</tr> 
</table> 
</body> 
</html>

來源

2012-06-25 coen

它可以這樣做：

<table border="1" width="100%" style="table-layout: fixed; "> 
<col width="60px"> 
<tr> 
    <td style="overflow: hidden;text-overflow: ellipsis;">500.000.000.000.000</td> 
    <td>10.000</td> 
</tr> 
<tr> 
    <td>1.500.000</td> 
    <td>2.000</td> 
</tr> 
</table>

來源

2012-06-26 08:17:39 coen

如何控制HTML表格列寬與文本溢出結合

回答

相關問題