tailwindでテーブルの作成

やりたいこと

最初の 1 列目と 1 行目（カラムの行）を固定したテーブルを作成する。

完成品

コード

<div className=" ml-[50px] whitespace-nowrap overflow-auto h-[500px] w-[50%] mt-[100px] top-0">
  <table className="table-auto">
    <thead className=" sticky top-0 z-10 ">
      <tr className="bg-gray-200">
        <th className="sticky left-0  bg-white border ">name</th>
        <th className="px-4 py-2 border ">url</th>
        <th className="px-4 py-2 border ">name</th>
        <th className="px-4 py-2 border ">url</th>
        <th className="px-4 py-2 border ">name</th>
        <th className="px-4 py-2 border ">url</th>
        <th className="px-4 py-2 border ">name</th>
        <th className="px-4 py-2 border ">url</th>
        <th className="px-4 py-2 border ">name</th>
      </tr>
    </thead>
    <tbody>
      {res?.results.map((res, i) => {
        return (
          <tr key="{i}">
            <td className=" px-4 py-2 sticky left-0 z-[2] bg-slate-100 border ">
              {res.name}
            </td>
            <td className=" px-4 py-2 border ">{res.url}</td>
            <td className=" px-4 py-2 border ">{res.name}</td>
            <td className=" px-4 py-2 border ">{res.url}</td>
            <td className=" px-4 py-2 border ">{res.name}</td>
            <td className=" px-4 py-2 border ">{res.url}</td>
            <td className=" px-4 py-2 border ">{res.name}</td>
            <td className=" px-4 py-2 border ">{res.url}</td>
            <td className=" px-4 py-2 border ">{res.name}</td>
          </tr>
        );
      })}
    </tbody>
  </table>
</div>

ポイント

色々な記事を漁った感じ、whitespace-nowrap 、overflow-auto、 stickyを使用することで固定させることが分かった。
<table>タグを、<div>で囲い上の二つのwhitespace-nowrapとoverflow-autoを<div>に与える。この際、横幅と縦幅を必ずつける必要がある。
あとは、stickyで固定したい箇所を固定するだけ。この際にも上部を固定する際は、top-0、左の列を固定するならleft-0にする必要がある。

幅と位置に気を付けることがポイントみたいですね。

以上。