php - 如何在 CSS 中制作响应式表格

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元素，可以在移动端将table和td元素的样式改成display: block，然后修改。

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

示例:

.mobile-table{ // or whatever class you want
    display: none;
}

@media (max-width: 767px){
    table{
        display: none;
    }
    .mobile-table{
        display: block;
    }
}