調整表格中的列寬（CSS / HTML）

Question

我一直在嘗試使移動設備上的列寬變為50％，但我嘗試過的所有方法均無效。 這是css。

@media (max-width: 768px) {

#customTable tbody { float: left; }
#customTable thead { float: left; }
#customTable thead { min-width: 120px }
#customTable td { display: block }
#customTable th { display: block }
#customTable {table-layout: fixed;}
#customTable td {width: 50%;}
#customTable td {height: 20px; overflow: hidden;}
#customTable div {height: 20px;overflow: hidden;}
}

這是HTML

 <div class="table">
<table id="customTable" class="table" style="width: 100%">
<thead>
    <tr>
        <th><LABEL>Test 1</LABEL></td>
        <th><LABEL>Test 2</LABEL></td>
        <th><LABEL>Test 3</LABEL></td>
        <th><LABEL>Test 4</LABEL></td>
    </tr>
    </thead>
    <tr>                
        <td><LABEL>Test</LABEL></td>
        <td><LABEL>Test</LABEL></td>
        <td><LABEL>Test</LABEL></td>
        <td><LABEL>Test</LABEL></td>
    </tr>

</table>
</div>

Answer 1

如果要使用表調整列寬，則實際上需要告訴它不再充當表。

例如，在#customTable td上使用display:block和width:50%並從那里開始工作，就好像它們是block元素一樣。

Answer 2

如果要調整列的寬度，則應調整thead中 th的寬度。

這對我有效。