如何调整表格大小以对应媒体屏幕大小？

我很难调整我的表格以适合媒体屏幕大小。现在的布局通过媒体查询来调整其内容。实际上，不需要滚动条。如何调整表格大小以对应媒体屏幕大小？

下面是一些代码...

（1）HTML：

<div id="results"> 
</div>

雅，它真的很简单。这个标签实际上存在于其他一些保存内容的div中。这个特殊的div保存发出请求时从服务器发送的内容。当纯文本是内容时，它会正确响应，但表格会导致问题。

这里是我的CSS代码...

（1）CSS为#results

div#results { 
    width: 90%; 
    margin: 0 auto; 
    margin-top: 30px; 
}

（2）CSS的表：

table { 
    font-family: 'PT Sans', Arial, sans-serif; 
    color: #666; 
    font-size: 12px; 
    text-shadow: 1px 1px 0px #fff; 
    background: #eaebec; 
    margin: 20px; 
    border: #ccc 1px solid; 
    width: 80%; 
    margin: 0 auto; 
} 

table th { 
    padding: 21px 25px 22px 25px; 
    border-top: 1px solid #fafafa; 
    border-bottom: 1px solid #e0e0e0; 
    background: #ededed; 
} 

table th:first-child { 
    text-align: left; 
    padding-left:20px; 
} 

table tr { 
    text-align: center; 
    padding-left: 20px; 
} 

table td:first-child { 
    text-align: left; 
    padding-left: 20px; 
    border-left: 0px; 
} 

table td { 
    padding:8px; 
    border-top: 1px solid #ffffff; 
    border-bottom:1px solid #e0e0e0; 
    border-left: 1px solid #e0e0e0; 
    background: #fafafa; 
} 

table tr:hover td { 
    background: #f2f2f2; 
}

表的大小保持不变无论媒体屏幕大小如何。 CSS可能会使这一点很明显。但是，在这种情况下可以做些什么？如果我“挤”桌子，内容将难以辨认。例如，如果我想在智能手机上拉起桌子，我该如何修改桌子才能使用它？现在我有5列。有没有办法可以开始一个新的行，比如两三列之后，以便内容不必被压缩？

这是基本的想法;我希望我所说的关键是明确的。任何输入赞赏。

来源

2013-07-21 Mlagma

有很多方法可以处理较小屏幕上的表格。很多网站做的是把它们放在一个div中，并将div分配为100％的宽度并溢出：auto;然后他们为表本身设置一个最小宽度，以保持数据的完整性而不会混淆表格。

当用户到达一张对于他们的屏幕来说太大的表格时，所有用户都会滚动，但由于它包含在100％宽度的div中并且溢出，所以不会中断页面的流动。

这只是一种方法，而且是最容易标记的方法。

希望有所帮助。

来源

2013-07-21 07:47:21

如何调整表格大小以对应媒体屏幕大小？

回答

相关问题