tableレイアウトでth1列td2列のCSS

こんにちは。
今日は最近習得した、tableのとあるデザインのCSSについて書きます。

pcデザインはよく見かける感じです。

問題なのがspデザインでth横幅いっぱい、tdが2列並んでいるものです。

実は最近実務でこのレイアウトがあったのですが、スマホのほうが分かりませんでした(^^;
今後スムーズにかけるようにしっかり残しておきます。
ではコーディング編にうつります！

コーディング

HTML編

        <table>
          <tr>
            <th>タイトル</th>
            <td>例1</td>
            <td>例2</td>
          </tr>
          <tr>
            <th>タイトル</th>
            <td>例1</td>
            <td>例2</td>
          </tr>
          <tr>
            <th>タイトル</th>
            <td>例1</td>
            <td>例2</td>
          </tr>
        </table>

CSS編

table {
  border-top: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
}
th, td {
  border-left: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
　text-align: center;
}
th {
  background: #f1f1f1;
  font-weight: bold;
}

@media only screen and (min-width: 769px) {
  th,
  td {
    padding: 15px 20px;
  }
  th {
    box-sizing: border-box;
    width: 180px;
  }
}


@media only screen and (max-width: 768px) {
  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
    box-sizing: border-box;
    width: 100%;
  }
  tr {
    display: flex;
    flex-wrap: wrap;
  }
  th {
    padding: .8em 2em;
  }
  td {
    width: 50%;
    padding: 1.2em 1em;
  }
}

スタイルは最低限付けています。（数字は実務のをコピーしました）
tableにflexをつかう方法は思いつきませんでした(^^;
最初はthだけにdisplay:block;をかけたのですが効かないな〜と悩みました・・・
縦並びレイアウトの時はまずtableをつくる要素全てをブロック要素にすることを忘れないでおこうと思います。

では時間がきたので今日はここまで〜〜