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列必須使用剩餘空間的規則，而其他列必須適應。人們再次抱歉 –

回答

相關問題