如何在CSS中制作响应表

我已经尝试了下面提到的一段代码，但它没有使其响应。任何人都可以对此代码进行修改以使其响应？如何在CSS中制作响应表

.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> ';

来源

2017-01-10 raja

发表您的HTML代码 – mlegg

它显示表，但没有反应 – raja

@raja你在寻找它，当你说“有求必应”做。并且可以将“呈现”html发布到您的原始问题 – happymacarts

尝试把它与溢出-X的容器：汽车，这应该弹出的屏幕上调整表格的水平滚动条。这里有一个例子

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

上面得到的回答牢记表中的“添加一个滚动条”的简单行为。我不想考虑和增加桌面响应的高级水平。如果你想让你的桌子上的每一行都充当个人桌子，当屏幕尺寸太小时，回答问题宋琦刘是方法。

一个我想更多的东西添加到样式相对于你的表头

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

这将设置标题的左边与右边的值。 最小设备宽度和最大设备宽度是其他感兴趣的属性，如果您正在考虑移动。检查更here

来源

2017-01-10 18:58:56

如果你想根据窗口的大小来调整你的表尝试使用“@media”块，这样你可以确保你的页面看起来正是你想要

“@media”以同样的方式规则根据屏幕大小 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp 使用此链接了解改变CSS值更

来源

2017-01-10 19:15:47

我所做的展示要么用引导网格功能或修改表的显示风格上移动表。我根据我想展示的内容使用它们。

的关键是要增加@media查询，以便它改变根据屏幕大小：

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

如果必须使用表元素，你可以表和TD元素的样式改变为显示：在手机上阻止，然后从中修改它们。

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

例如：

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

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

来源

2017-01-10 19:19:17

如何在CSS中制作响应表

回答

相关问题