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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3098閲覧

bootstrap3利用中のtableタグ利用時の疑問

tsuru0508

総合スコア65

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/09/28 07:25

編集2016/09/28 07:48

###前提・実現したいこと
よろしくお願いします。

bootstrap3
tableタグで下記のタグを記載しました。
テキストボックスは、右端まで一杯に伸びると
私は思ってましたが、colspanを入れると若干
短かくなります。
これは仕様なのでしょうか?
解決策があれば教えてください。
なければ仕様だと思って、諦めます。

イメージ説明

###該当のソースコード

<div class="col-xs-12 col-sm-5 padding0"> <table class="table"> <tbody> <tr> <td class="col-xs-6"> <div class="input-group"> <span class="input-group-addon">システムID</span> <input type="text" class="form-control" id="sysid" style="width:80px;text-align: right;" value="121212" readonly> </div> </td> <td class="col-xs-6"> <div class="input-group"> <span class="input-group-addon">○○○NO</span> <input type="text" class="form-control" id="manid" style="width:80px;text-align: right;" value="3423687"> </div> </td> </tr> <tr> <td colspan="2" class="col-xs-12"> <div class="input-group"> <span class="input-group-addon">氏名(漢字)</span> <input type="text" class="form-control" id="namae" placeholder="名前を入力します。"> </div> </td> </tr> <tr> <td colspan="2" class="col-xs-12"> <div class="input-group"> <span class="input-group-addon">氏名(カナ)</span> <input type="text" class="form-control" id="namae-kana" placeholder="名前をカナで入力します。"> </div> </td> </tr> <tr> <td colspan="2" class="col-xs-12"> <div class="input-group"> <span class="input-group-addon">氏名(英字)</span> <input type="text" class="form-control" id="namae-eng" placeholder="名前を英字(英語)で入力します。"> </div> </td> </tr> <tr> <td class="col-xs-6"> <div class="input-group"> <span class="input-group-addon">生年月日</span> <input type="text" class="form-control datepicker" style="width:100px;" id="bod" placeholder="誕生日を選択します。"> </div> </td> <td class="col-xs-6"> <div class="input-group"> <span class="input-group-addon">年齢</span> <input type="text" class="form-control" style="width:50px;text-align: right;" value="20" readonly>歳 </div> </td> </tr> <tr> <td class="col-xs-6"> <div class="radio-inline"> <input type="radio" value="1" name="gender" id="man"> <label for="man">男性</label> </div> <div class="radio-inline"> <input type="radio" value="2" name="gender" id="woman"> <label for="woman">女性</label> </div> </td> <td class="col-xs-6"> <div class="input-group"> <span class="input-group-addon">○○○</span> <input type="text" class="form-control" id="manid" style="width:100px;" value="○○○"> </div> </td> </tr> </tbody> </table> </div>

###補足情報(言語/FW/ツール等のバージョンなど)
bootstrap3

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/09/28 07:32

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
tsuru0508

2016/09/28 07:48

ご指摘ありがとうございました。 修正いたしました。
guest

回答2

0

何かほかのスタイルがあたっているんだと思います。
.input-group .form-controlwidth: 100%;なので通常であればセルいっぱいに伸びます。

投稿2016/09/28 07:59

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

html

1<div class="input-group">

正しい使い方ではないですが、このinput-groupに対してcol-xs-12のクラスを追加すると横幅いっぱいになります。

html

1<div class="input-group col-xs-12">

tableタグでのレスポンシブ対応は限界が出てくるので、
tableではなくdivでrowとcolを組んでいくことをオススメいたします。

投稿2016/09/28 07:53

ShoheiTai

総合スコア897

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tsuru0508

2016/09/28 14:26

ありがとうございます。ばっちりです。助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問