Gatsby Markdownのテーブルをレスポンシブにしてタイトルをつける方法

<!-- html -->
<!-- 全体をdivで囲み, 任意のclass名をつける. -->
<div class='scrollable-table'> 
<p>
<!-- テーブルのタイトルをp要素として書く -->
タイトル
</p>

<!-- いつも通りテーブルを書く. 1行空けること -->
|a  |b  |c  | 
|---|---|---|
|1  |2  |3  |
|4  |5  |6  |

</div>

/* css */
  .scrollable-table {
    p {
      text-align: center; /* タイトルを中央寄せ. */
    }
  }
  @media screen and (max-width: 780px) {
    .scrollable-table {
      overflow-x: auto; /* スマホ画面ではスクロール表示されるように. */
    }
    .scrollable-table table {
      min-width: 480px; /* スマホ画面ではスクロール表示されるように. */
    }
  }