像素中的响应表列宽度

我有一个html表（宽度100％），其中每列有一个指定的宽度，例如， style =“width：240px”。我无法将这些宽度转换为％。在表大小改变时，是否有一种巧妙/有效的方式来调整列的大小（使它们响应）？谢谢！像素中的响应表列宽度

2014-10-11 user1601810

还有就是要做到这一点，而不百分比没有有效的方法，除非你想要的表做“跳” -steps，在那里将减少100像素的一段时间什么的。最好的方法可能是使用最大宽度，最小宽度和百分比。不知道这是否符合您的需求。 – orhanhenrik 2014-10-11 15:52:57

看看这个 - > http://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/ – Meer 2014-10-11 15:54:34

您可以使用媒体查询来实现此目的。喜欢这个。

@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/

来源

2014-10-11 15:55:14

一个好主意，但媒体查询不会帮助我。在我的情况下，当容器div（不一定是父div）接收到“更改大小”事件时，网格表将调整大小，这会更改容器div的宽度。 – user1601810 2014-10-11 16:50:47

@ user1601810，更新后的代码，即您可以直接使用上面显示的CSS来进行必要的更改，而无需触及内联样式。 – 2014-10-11 17:31:04

用途％，为第一行

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>

来源

2014-10-11 15:58:12 J03Bukowski

像素中的响应表列宽度

回答

相关问题