如何製作一個html表格，其寬度可以動態調整

Question

嗨我想知道如何創建一個表格，根據列數（取決於用戶需要多少）動態調整其寬度，每個表格固定寬度爲150px 。

我的客戶希望表格也能水平滾動，如果它超過了容器的寬度。 （我認爲使用溢出-X：滾動）

一個簡單的例子就可以了:)

Answer 1

您可以通過添加表在一個容器中，用最大寬度和溢出定義這樣做的：

.table-container { 
 
    max-width: 100%; 
 
    overflow-x: auto; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
} 
 

 
table td { 
 
    min-width: 150px; 
 
    max-width: 150px; 
 
}

<div class="table-container"> 
 
<table> 
 
    <tr> 
 
    <td>c1</td> 
 
    <td>c2</td> 
 
    <td>c3</td> 
 
    <td>c4</td> 
 
    <td>c5</td> 
 
    </tr> 
 
    
 
</table> 
 
</div>