响应式表格列宽(像素)

Question

我有一个html表格(宽度100%)，其中的每一列都有一个指定的宽度，例如style=“宽度: 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%;
}

您还可以为tr定义一个不需要在移动设备中可见的类(比方说mobile_not_show)。然后，在上面的media查询中，只需设置.mobile_not_show {display:none;}.So，这将使那些特定的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>