html - 调整表中的列宽 (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 元素一样。