daisyUIのtableクラスで、ヘッダーが大文字になったり固定されるのを抑制する

daisyUIの table クラスを使うと、theadのth,tdタグに書いたアルファベットが大文字に変換される。

また、スクロール可能なテーブルの場合、最初のthタグの位置が固定されてしまう。

ちょっとイマイチな挙動のため、変更する方法を調べたのでメモ。

Tailwind CSS v3.2.4, daisyUI v2.43.0。

公式のコンポーネント紹介を見てもらうとわかるが、thead配下のthタグのテキストが大文字に変換される。

text-transform: uppercase; 、Tailwind CSSだと uppercase クラスが付与されている模様。

以下がソースコードの対象部分。theadだけでなく、tfootでも同様の変換が行われる。

  :where(thead, tfoot) {
    :where(th, td) {
      @apply bg-base-200 text-xs font-bold uppercase;
    }
  }

table クラスにModifierがないか確認したが、v2.43.0時点では用意されていない。

daisyUIの設定で変更できるか調べたが、テーマの追加はできるが既存のクラスの変更はできない模様。

<thead className="!normal-case"> や <tr className="!normal-case"> で上書きできるかと思ったが、カスケード層が異なるからか、効果がない。

thタグに <th className="normal-case"> すれば有効となるが、都度記述するのが面倒。theadで <thead className="[&_th]:normal-case"> でも変換を無効化できるが、そもそも変換させたくない。

Next.jsを使っているので、結局 styles/global.css に以下を追加して対応した。元の定義の :where の階層と同様だが、上書きされることは想定しないので、 :is を使用。

.table :is(thead, tfoot) :is(th, td) {
  text-transform: none;
}

以下のissueのgifを見てもらうとわかりやすいが、スクロールしたときに、theadの最初のthが固定され、スクロールしない。

これまたtheadの大文字変換同様、v2.43.0時点ではModifierがないので、 styles/global.css に以下を追加して対応。

.table th:first-child {
  position: relative;
}

最終的に、両方CSSで上書きすることになった。デフォルトでこれはちょっとおせっかいな気がする。

特にヘッダーのセル固定、行全体を固定ならともかく、なんで最初のセルだけ固定しているんだろう?

issueのコメントでも「デフォルトでstickyにするのはやめて table-sticky-header オプションを追加しない?」と書かれているが、ヘッダーの最初のセルを固定するというのはどこから来た挙動なんだろうか。