Показывать скрытый div, когда отзывчивая таблица становится прокручиваемой на маленьком устройстве

Question

В проекте, в котором я работаю, слишком много таблиц. Я закончил с ними и сделал их отзывчивыми. Таблицы берут вертикальную прокрутку, если она не помещается ни в какое устройство. Все таблицы имеют разную ширину.

Например,

• Таблица A выполняет вертикальную прокрутку с устройства размером менее 768 пикселей
• Таблица B принимает вертикальную прокрутку с устройства размером менее 667 пикселей
• Таблица C принимает вертикальную прокрутку с устройства размером менее 414 пикселей
• и многие другие ....

Теперь я хочу показать одну заметку, информирующую о прокручиваемой таблице, только когда она требует прокрутки. Я должен сделать это вручную, применяя различные классы и медиа-запросы ко всем таблицам. И это займет слишком много времени, так как у меня слишком много таблиц.

Есть ли какой-нибудь трюк или скрипт CSS, который отображает эту заметку, когда таблица становится прокручиваемой?

См. Фрагмент ниже. Здесь <p> занимает display:block в устройстве 736px и ниже, так как таблица там прокручивается.

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;
}
}

<div class="scrollable">
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
</div>
<p>Note: Scroll above table to see more content.</p>

Answer 1

Вы можете сравнить ширину элемента .scrollable и table. Если есть свиток - таблица должна быть шире, чем ее контейнер:

var $containers = $('.scrollable');

$containers.each(function() { // in case there are multiple scrollable tables on the page
    var $container = $(this);
    var $table = $container.find('table');

    if ( $container.width() < $table.width() ) {
        $container.addClass('show-notice');
    }
});

Обновление CSS для вашего примера:

.scrollable.show-notice p { display: block; }