HTMLの<table>において、入力ボックスを枠いっぱいに広げる方法

Question

前提

HTMLでセルの値を編集可能な<table>を作成しています。

実現したいこと

➀<input>と<textarea>をセルいっぱいに広げたい（palegreen が見えないくらいにしたい）です。
➁<textarea>を縦にresize可能にしたいです。

発生している問題

➀と②が同時に実現できません。

該当のソースコード

https://jsfiddle.net/r0fw82gx/

<table border="1">
  <thead>
    <tr>
      <td class="name">name</td>
      <td class="note">note</td>
    </tr>
  </thead>
  <tbody>
    <tr class="input_area">
      <td class="name"><input type="text"/></td>
      <td class="note"><textarea></textarea></td>
    </tr>
    <tr>
      <td class="name">鈴木</td>
      <td class="note">頑張り屋さん</td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
}
.input_area td {
  background: palegreen;
  position: relative;
  height: 30px;
  width: 100px;
}

試したことA

すぐ思いついたのがこちらのようにabsoluteでいっぱいにする方法ですが、②が実現できません。
https://jsfiddle.net/r0fw82gx/1/

/* 試したことA */
.input_area td input,
.input_area td textarea {
  position: absolute;
  inset: 0 0 0 0;
}

試したことB

上記Aに鑑みて<textarea>をrelativeにする必要があると思いこちらを試しましたが、②が実現できても➀ができません。
https://jsfiddle.net/r0fw82gx/2/

画像のように、縦にrezizeするとpalegreenのエリアが出てきてしまいまうのです。

/* 試したことB */
.input_area td input {
  position: absolute;
  inset: 0 0 0 0;
}
.input_area td textarea {
  position: relative;
  height: 100%;
  width: 100px;
  max-height: 100%;
  max-width: 100px;  
}

補足情報（FW/ツールのバージョンなど）

恐れ入りますがCSSのみでの実装が希望です。
宜しくお願い致します。

Answer 1

縦にrezizeするとpalegreenのエリアが出てきてしまいまうのです。

これは置換インライン要素である textarea の vertical-align プロパティ値が baseline （あるいは text-bottom）であることに因ります。明示的に vertical-align: top や vertical-align: bottom を指定すれば余白は解消されます。

これは textarea に限ったことではなく、置換インライン要素である img 要素や iframe 要素も同様です。

• https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea#baseline_inconsistency

<input>と<textarea>をセルいっぱいに広げたい（palegreen が見えないくらいにしたい）です。

input を高さいっぱいに広げる意図がわからないのでこれには触れないでおきますが、textarea をセルいっぱいに広げてセル背景色を見えなくしたいのであれば、border-collapse: collapse アルゴリズムによるテーブル境界の描画は推奨しません。他の回答者の方の実装を見ても Firefox では背景色が境界線まで及んでしまっていると思います。

border-collapse: separate を適用して領域を厳密に描画すれば、セル背景色を見えなくするような実装が可能です。

https://codepen.io/arcxor/pen/rNJxJGY を参照してください。

Comments

[nikuatsu]

border-collapse: separate; ですか…。これまた滅多にお目にかからないようなプロパティをよくご存じで…。色々なことに詳しすぎて怖くなってきますｗ

ご提示のリンクではChromeもFirefoxも完璧に隙間がなくなっていました。いつも詳しくありがとうございます。

インライン要素に置換と非置換という区別があることも勉強になりました。

[recal]

textareaを縮めすぎると背景が出てくるのでtextarea自体にもmin-heightが必要だと思います。

[arcxor]

min-width: 100% の追加は意味がありそうですが、min-height はどのように設定したらよいのでしょう。高さに関して、縮めすぎても背景色がでないようにする方法が思いつきません。

Answer 2

textareaにdisplay: blockを付与して、
テーブルセルのブラウザデフォルトの padding をリセットすればいいでしょう。

table {
  border-collapse: collapse;
}
.input_area td {
  background: palegreen;
  position: relative;
  height: 30px;
  width: 100px;
  padding: 0;
}

textarea{
  display: block;
  border-style: none;
}

セルのボーダーとテキストボックスのボーダーが被るので、テキストボックスのボーダーを消しておくとよりスッキリするでしょう。

JSFiddle - Code Playground

Comments

[nikuatsu]

ありがとうございます。そのひと工夫がたどり着けませんでした。

[nikuatsu]

惜しくもFirefoxにおいてpalegreenがわずかに残ってしまっていました…。とはいえ良い工夫をありがとうございます。

Answer 3

B案をベースにやってみました
どうでしょう？

- <table border="1">
+ <table>

tableのborder="1"削除

input,
textarea {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  appearance: none;
}

textarea {
  resize: vertical;
  vertical-align: top;
  min-height: 1rem;
}
td,
th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}
.input_area td {
  background: palegreen;
  position: relative;
  min-height: 30px;
  width: 100px;
  padding: 0;
}

/* 試したことB */
.input_area td input {
  position: absolute;
  inset: 0 0 0 0;
}
.input_area td textarea {
  position: relative;
  height: 100%;
  width: 100px;
  max-height: 100%;
  max-width: 100px;
}

Comments

[nikuatsu]

ありがとうございます。完璧に隙間が埋まってますね。

Answer 4

変更した点はtextareaに対して、display: blockを付与しただけです。
実現したかった事は、全て再現できていますでしょうか？
※「頑張り屋さん」の横幅以下にすると、隙間が発生します

こちらに、修正したコードです！
https://jsfiddle.net/tgur8qnj/17/

Comments

[nikuatsu]

>こちらに、修正したコードです！
ありがとうございます。たしかにblockにするだけでかなりイメージ近くなりますね。
しかし「試したことA（absoluteにした場合）」のように隙間をゼロにしたいのですが…、blockだと微妙に隙間ができてしまうんですよね。これはもうどうしようもないのでしょうか？

>※「頑張り屋さん」の横幅以下にすると、隙間が発生します
これは構いません

[kobu]

色々試してみましたが、自分の力では若干ある隙間は消えませんでした。。。

[nikuatsu]

お手数おかけして申し訳ございません。ご助力感謝申し上げます。