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

如果你想要使用表来调整列宽，你实际上需要告诉它不再表现为表。

e.g。在display:block上使用width:50%和#customTable td并在那里工作，就像它们是块元素一样。

Answer 2

如果您想调整列的宽度，则应调整 thead 中 th 的宽度。

这对我很有用。

调整表格中的列宽（CSS / HTML）

2 个答案: