調整表格中的列寬（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%，並從那裏開始工作，就好像它們是塊元素一樣。

Answer 2

如果要調整列的寬度，則應該調整第的寬度，在thead中。

這對我很好。