CSSでテーブル内の値を、中央寄せ且つ左寄せにしたい。またinputの幅を可変にしたい

HTMLとCSSでテーブルを作成しているのですが、
下記のように、左端がずれてしまいます。

中央揃えにしつつ、inputの開始位置の左端を揃えたいのですが、
これは無理なのでしょうか。

また、inputの幅自体も入力文字に応じて広がるようにしたいのですが、
こちらも難しいのでしょうか?
ご教示よろしくおねがいします。

html
1<link
2  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
3  rel="stylesheet"
4  integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
5  crossorigin="anonymous"
6/>
7
8<body>
9  <table class="table table-borderd">
10    <thead>
11      <tr>
12        <th>column</th>
13      </tr>
14    </thead>
15    <tbody>
16      <tr>
17        <td><input type="text" value="test" /><span>回</span></td>
18      </tr>
19      <tr>
20        <td><input type="text" value="test" /><span>人</span></td>
21      </tr>
22      <tr>
23        <td><input type="text" value="test" /><span>bpm</span></td>
24      </tr>
25    </tbody>
26  </table>
27</body>
28
29<style>
30  th,
31  td {
32    text-align: center;
33  }
34  input {
35    width: 50px;
36  }
37</style>
38

追記

中央寄せ且つ左寄せにしたい

言われてみれば矛盾していました。

左の黒い線を引いた部分を上下で揃えつつ、中央"あたり"に配置したいです

int32_t

2021/08/31 06:14

> 中央揃えにしつつ、inputの開始位置の左端を揃えたいどういう配置になって欲しいか、図示することはできますか?

Daregada

2021/08/31 06:16

> 中央揃えにしつつ、inputの開始位置の左端を揃えたいのですが、矛盾したことを言っていませんか? 長さが異なる内容を中央揃えにして、なおかつ左端を揃えることはできません。「左端を揃え」つつ、「中央付近に表示したい」(中央揃えでなくていい)ということでしょうか?

行動規範の内容に同意します

回答3件

ベストアンサー

中央揃えにしつつ、inputの開始位置の左端を揃えたい

要件に矛盾がありますが、まあやりたいことはわからないでもないので、対策としてはこんな感じ。
必要ならclass指定を加えて影響範囲を限定するようにしてください。

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
  crossorigin="anonymous"
/>

<body>
  <table class="table table-borderd">
    <thead>
      <tr>
        <th>column</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><div><input type="text" value="test" /><span>回</span></div></td>
      </tr>
      <tr>
        <td><div><input type="text" value="test" /><span>人</span></div></td>
      </tr>
      <tr>
        <td><div><input type="text" value="test" /><span>bpm</span></div></td>
      </tr>
    </tbody>
  </table>
</body>

<style>
  th,
  td {
    text-align: center;
  }
  input {
    width: 50px;
  }
  td div {
    display: inline-block;
    position: relative;
  }
  span {
    position: absolute;
    top: 0;
    left: 55px;
  }
</style>

入力文字に応じて広がる

これはJavaScriptを書かないと難しいかなと思います。

投稿2021/08/31 06:28

itagagaki

総合スコア8402

change

2021/09/08 01:48

ありがとうございます。上手くいきました!

行動規範の内容に同意します

CSS
1  input+span {
2    width: 50px;
3    display: inline-block;
4  }

投稿2021/08/31 06:25

kei344

総合スコア69625

CSS
1table{margin:auto}

入力文字に応じて広がる

できないことはないですが入力できる用量がきまっているなら
最初から十分広げておけばいいでしょう？

投稿2021/08/31 06:13

yambejp

総合スコア117669

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

CSSでテーブル内の値を、中央寄せ且つ左寄せにしたい。またinputの幅を可変にしたい

関連した質問