Chapter 06

tailwindcss table テーブル

knaka Tech-Blog
knaka Tech-Blog
2021.04.29に更新
このチャプターの目次

概要:

テーブル レイアウト の設定の例になります


関連

https://tailwindcss.jp/docs/table-layout
  • コード

https://github.com/kuc-arc-f/tailwind-sample/blob/main/src/01_table.html

src/01_table.html

  • table-auto を使う例です
01_table.html
    <table class="table-auto">
      <thead>
        <tr>
          <th class="px-4 py-2">Title</th>
          <th class="px-4 py-2">Author</th>
          <th class="px-4 py-2">Views</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="border px-4 py-2">Intro to CSS</td>
          <td class="border px-4 py-2">Adam</td>
          <td class="border px-4 py-2">858</td>
        </tr>
        <tr class="bg-gray-200">
          <td class="border px-4 py-2">A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
          <td class="border px-4 py-2">Adam</td>
          <td class="border px-4 py-2">112</td>
        </tr>
        <tr>
          <td class="border px-4 py-2">Intro to JavaScript</td>
          <td class="border px-4 py-2">Chris</td>
          <td class="border px-4 py-2">1,280</td>
        </tr>
      </tbody>
    </table>

参考のデモページ

https://kuc-arc-f.github.io/tailwind-sample/src/01_table.html

....