响应式表格列宽（以像素为单位）答案

【问题标题】：Responsive table column widths in pixels响应式表格列宽（以像素为单位）
【发布时间】：2014-12-06 15:02:35
【问题描述】：

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

【问题讨论】：

没有百分比没有有效的方法可以做到这一点，除非您希望表格执行“跳跃”-步骤，它会一次减少 100px 或其他东西。最好的方法可能是使用最大宽度、最小宽度和百分比。不确定这是否符合您的需要。
看看这个-> templates.mailchimp.com/development/responsive-email/…

【解决方案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;}。所以这将使那些特定的tr 仅隐藏在移动设备中。消息来源-http://css-tricks.com/responsive-data-tables/

【讨论】：

一个好主意，但媒体查询对我没有帮助。在我的例子中，当容器 div（不一定是父 div）收到“更改大小”事件时，网格表会调整大小，这会改变容器 div 的宽度。
@user1601810 ，更新代码，即您可以直接使用CSS 进行所需的更改，如上所示，无需触及内联样式。

【解决方案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>

【讨论】：