html表列大小

我想知道是否有办法按照我想要的方式调整表的大小？我想有一个X列的表，其中只有一列可以有一个可变大小，其他人必须适应其大小，同时保持最小宽度。 EX。html表列大小

| Col0 | Col1 | Col 2   | Col3  | Col4    | Col5 | 
| dat1 | d | dat3dater  | datadata | datatdatadatadata | dat | 
|  | dat2 | asdasd   | datad | datadatadatad.....|  |

在这种情况下，第2列使用剩余空间，其他列适应其内容。

这是什么样的最简单的方式？

来源

2017-09-05 Luca Calabrese

我会尝试stacktable.js – Brian

这听起来像是响应式设计。因此，您可以使用框架或简单地使用我的示例，然后根据需要扭曲它。

table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 100%; 
 
    border: 1px solid #ddd; 
 
} 
 

 
th, td { 
 
    border: none; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even){background-color: #f2f2f2}

<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<h2>Responsive Table</h2> 
 
<p>Sample data take from w3schools.com .</p> 
 

 
<div style="overflow-x:auto;"> 
 
    <table> 
 
    <tr> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>LONG ONE</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
    </tr> 
 
    <tr> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>This wİll be longer so you can see the difference i hope</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
    </tr> 
 
    <tr> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
    </tr> 
 
    <tr> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 
</body> 
 
</html>

来源

2017-09-05 14:44:06

可正常工作。你能向我解释为什么它能这样工作吗？我没有看到任何明确声明LONG ONE列必须使用剩余空间的规则，而其他列必须适应。人们再次抱歉 –

回答

相关问题