0

テーブルのセルにパディングを追加したいのですが、これによりテーブル内のテキストや入力などがオーバーフローします。他のスタック オーバーフローの議論から、答えは setbox-sizing: border-boxであることがわかりましたが、これはうまくいきません。

以下は、問題を説明するための最小限の例です。

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

table,
th,
td {
  border: 1px solid black;
  padding: 1.5%;
}

table {
  border-collapse: collapse;
}
<table>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
    <td><input value=1></td>
  </tr>
</table>

1.5% のパディングを使用すると、入力ボックスはセルの右端からはみ出します。パディングが 0 に変更された場合、入力ボックスはぴったりと収まります。パディングを維持したいが、入力ボックスをフィットさせたい。

4

2 に答える 2

3

表のセルを埋めるように入力の幅を設定します

input{
    max-width: 100%;
}


* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

table,
th,
td {
  border: 1px solid black;
  padding: 1.5%;
}

table {
  border-collapse: collapse;
}
input {
  max-width: 100%;
}
<!DOCTYPE html>
<table>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
    <td><input value=1></td>
  </tr>
</table>

編集：修正してくれた@javier Reyに感謝します

于 2019-01-20T20:17:35.777 に答える