Question

我已经尝试过下面提到的代码用于表，但它没有使它响应。任何人都可以修改此代码以使其响应吗？

.content table {
    border-collapse:collapse;
    margin:0 0 1.625em;
    width:100%;
    font-size:90%
}
.content table h3 {
    font-size:1em;
    font-weight:300
}
.content tbody {
    border-bottom:1px solid #444;
    border-left:1px solid #444
}
.content tr:nth-child(odd) {
    background-color:#eee
}
.content table th {
    background-color:#0078d7;
    color:#fff;
    font-size:.85em
}
.content td,.content th {
    vertical-align:top
}
.content th,.content td {
    padding:3px 10px;
    text-align:left;
    border-top:1px solid #444;
    border-right:1px solid #444
}

HTML

$menu .= '<table class="content"><thead><tr><th>Name</th><th>Description</th>‌<th>Price</th></tr><‌/thead>'; 

while ( have_rows('sections_items') ) : the_row(); 
    // Your loop code 
    $menu .= '<tr><td>'.get_sub_field('dish_names').'</td><td>'.get_sub_f‌ield('dish_descripti‌on').'</td><td>$ '.get_sub_field('dish_price').'</td></tr>';
endwhile;

$menu .= '</table> ';

Answer 1

我在移动设备上显示表格所做的是使用引导网格功能或修改表格显示样式。我根据我想要显示的内容使用它们。

关键是添加@media查询，以便根据屏幕大小进行更改：

@media (max-width: 767px){
    table{
        //styles you want to change
    }
}

如果必须使用表格元素，可以在移动设备上将table和td元素的样式更改为 display：block ，然后再修改它们。

另一种不建议这样做的方法是仅为移动设备创建一个全新视图，并使用媒体查询隐藏原始表。这会创建重复数据，但您可以随意自由选择自定义移动视图。

示例：

.mobile-table{ // or whatever class you want display: none; } @media (max-width: 767px){ table{ display: none; } .mobile-table{ display: block; } }

Answer 2

尝试将它放在带有overflow-x：auto的容器中，这会在屏幕调整大小时为表格调出一个水平滚动条。这是一个例子

<div style="overflow-x:auto;"> <table class="content"> .... </table> </div>

上面的回答是记住表“添加滚动条”的简单行为。我没有思考并添加高级的表响应能力。如果您希望将表格的每一行作为单独的表格，当屏幕尺寸太小时，通过 Songqi Liu 回答是接近的方式。

我还想添加一些与表格标题相关的样式

td:nth-of-type(1):before { content: "Name"; }
td:nth-of-type(2):before { content: "Description"; }
td:nth-of-type(3):before { content: "Price"; }

这会将标题设置在左侧，并在右侧显示值。 min-device-width 和 max-device-width 是您考虑移动时感兴趣的其他属性。查看更多here

Answer 3

如果您想根据窗口大小调整表格大小，请尝试使用“@media”块，以确保您的页面看起来与您想要的完全相同

'@ media'规则根据屏幕大小更改css值 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp 使用此链接了解更多

如何在CSS中制作响应表

3 个答案: