Question

我正在工作的项目中有太多表。我已经完成了他们的工作，并使他们响应。如果表格不适合任何设备，则进行垂直滚动。所有桌子的宽度都不同。

例如，

表A从小于768像素的设备上进行垂直滚动
表B从小于667px的设备上进行垂直滚动
表C从小于414px的设备上进行垂直滚动
还有更多......

现在，我想仅在滚动时显示一个通知可滚动表的注释。我必须通过对所有表应用不同的类和媒体查询来手动执行此操作。而且因为我有太多的表，这将非常耗时。

一旦表格可滚动，是否有CSS技巧或脚本显示该注释？

请参见以下代码段。在这里Http在设备736px及以下的设备中占据<p>，因为该表可在此处滚动。

display:block

p{
font-family:arial;
display:none;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #ababab;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

.scrollable {
    overflow-x: auto;
}

@media screen and (max-width: 736px)
{
p{
display:block;
}
}

Answer 1

您可以比较$(document).ready(function(){ $(".color").change(function(){ var check_color = $(this).children(":selected").attr("id"); check_select(check_color); }); var check_select = function(check_color){ //console.log(check_color); var values_options = []; values_options.push(check_color); $(".color>option").each(function(index,element){ var id_check = $("#"+check_color+index).attr('id'); if(typeof id_check!="undefined"){ values_options.push(id_check) } }); // console.log(values_options); var idframe = [] $("iframe").each(function(value){ idframe.push($(this).attr('id')); }); //console.log(idframe); //for change iframe for(var i=0;i<idframe.length;i++){ $("#"+idframe[i]).attr('src',$(".color>option#"+values_options[i]).val()); // console.log($(".color>option#"+values_options[i]).val()); } } var color = $(".color").children(":selected").attr("id"); check_select(color); });元素和<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <select class="color"> <option label="red" id="red" data-id="red" value="https://router.vuejs.org/api/#component-injected-properties"> </option> <option class="hide" id="red1" value="https://router.vuejs.org/guide/#html"></option> <option label="blue" id="blue" value="https://api.jquery.com/each/"></option> <option class="hide" id="blue1" value="https://ping.eu/ping/"></option> </select> <div><iframe id="iframeId" src=""></iframe></div> <div><iframe id="iframeId1" src=""></iframe></div>的宽度。如果有滚动条，则表格应比其容器宽：

.scrollable

根据您的示例更新CSS：

table

一旦响应表在小型设备中可滚动，则显示隐藏的div

1 个答案: