如何制作一个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>