Есть ли способ переполнения таблицы уценки с помощью HTML?

Question

У меня есть блог, построенный с использованием jekyll на страницах GitHub. В одном из моих сообщений (написано в markdown) есть таблица, которая переполняется в смартфонах, создавая горизонтальную полосу прокрутки всей страницы.

Я хочу знать, есть ли способ написать HTML + markdown, как показано ниже, для переполнения только div, а не всей страницы.

<div style="overflow-x: scroll;"> 

    |      |ODBC | SSMS | SQLCMD | ISQL| 
    |---      |:---:|:---: |:---: |:---:| 
    |ANSI_NULL_DFLT_ON  | ON | ON | ON  | OFF | 
    |ANSI_NULLS    | ON | ON | ON  | OFF | 

</div> 

Answer 1

Нет, вы не можете просто добавить оболочку html, но у вас есть несколько других опций.

Если вы используете двигатель Kramdown Markdown, просто добавьте оболочку, используя следующий фрагмент кода (обратите внимание на пустую строку между div тегами и блока уценки Это требуется..):

<div class="table-wrapper" markdown="block"> 

|      |ODBC | SSMS | SQLCMD | ISQL| 
|---      |:---:|:---: |:---: |:---:| 
|ANSI_NULL_DFLT_ON  | ON | ON | ON  | OFF | 
|ANSI_NULLS    | ON | ON | ON  | OFF | 

</div> 

Вы можете затем добавьте правило css в ваши sass/css-файлы и установите здесь переполнение.

.table-wrapper { 
    overflow-x: scroll; 
} 

Это четкий способ установки переполнения только для выбранных таблиц.