Question

我有一个html表（宽度为100％），其中每列都有指定的宽度，例如style =“width：240px”。我无法将这些宽度转换为％。当表大小发生变化时，是否有一种聪明/有效的方法来调整列的大小（使它们响应）？

Answer 1

您可以使用媒体查询来实现此目的。像这样。

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
        width: 30%; /* mobile device with have 70% reduction of width */
    }

}

或者你可以直接使用css来设置任何宽度或样式。

table {
 width:100%;
}

您还可以为mobile_not_show定义一个类（简称tr），不需要在移动设备中显示。然后在上面的media查询中设置.mobile_not_show {display:none;}。这样，这将使那些特定的tr仅隐藏在移动设备中。消息来源 - http://css-tricks.com/responsive-data-tables/

Answer 2

第一行使用％

table th {
  width: 25%;
}
<table style="width:100%">
  <tr>
    <th>Jill</td>
    <th>Smith</td> 
    <th>50</td>
    <th>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
    <td>94</td>
  </tr>
</table>

响应表格列宽度（以像素为单位）

2 个答案: