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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1154閲覧

<td><input/>%</td>の「%」が改行されてしまう

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/08/02 11:51

表題通りです。
下記詳細です。

HTML

1<div class="modal-body2"> 2 <form id="myform3" method="post"> 3 <table class="center"> 4 <tr> 5 <td> 6 <table class="table table-condensed table-bordered table-hover hos_table_data"> 7 <thead> 8 <tr class="active" id="datamodal2"> 9 <th class="control-label"><span>コード</span></th> 10 <th class="control-label"><span>名称</span></th> 11 <th class="control-label"><span>割引率</span></th> 12 </tr> 13 </thead> 14 <tbody> 15 <tr style="height: 30px;" data-row-id="dialogid"> 16 <td class="edit_id"> 17 <input type="text" maxlength="2" class="form-control fm" onclick="this.select();" 18 style="width: 50px; text-align: right; font-size: larger; padding: 3px;" 19 id="edit_id" name="edit_id" placeholder="00" readonly="readonly" /> 20 </td> 21 <td class="edit_name"> 22 <input type="text" maxlength="20" class="form-control fm" onclick="this.select();" 23 style="width: 300px; text-align: right; font-size: larger; padding: 3px;" 24 id="edit_name" name="edit_name" placeholder="20字以内で入力してください" /> 25 </td> 26 <td class="edit_received" style="width: 100px;"> 27 <input type="text" maxlength="3" class="form-control fm" onclick="this.select();" 28 style="width: 50px; text-align: right; font-size: larger; padding: 3px;" 29 id="edit_received" name="edit_received" placeholder="000" /> 30 &nbsp;% 31 </td> 32 </tr> 33 </tbody> 34 </table> 35 </td> 36 </tr> 37 </table> 38 </form> 39</div>

念のため、参考にしてしているCSS、JavaScriptです。

HTML

1<!-- 参照CSS,JavaScript --> 2 <link href="bootstrap3.2/bootstrap.min.css" /> 3 <link href="bootstrap3.1.1/bootgrid.css "/> 4 <link href="bootstrap3.1.1/jquery.bootgrid.css" /> 5 <link href="bootstrap3.1.1Examples.css" /> 6 <link href="bootstrap3.2/bootstrap.min.css" /> 7 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css"> 8 9 <script src="jquery-1.10.2.min.js" type="text/javascript"></script> 10 <script src="bootstrap3.2/bootstrap.min.js"></script> 11 <script src="bootstrap3.1.1/jquery.bootgrid.js"></script> 12 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

![イメージ説明

現状、上画像のような感じです。

<td></td>内を1行にまとめていないからと思い、1行にまとめてみましたが それでもダメでした。

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

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

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

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

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

guest

回答1

0

ベストアンサー

class="form-control"を指定するとdisplay: block;が適用されてinput前後の要素は改行されちゃいますね。
F12で開発者ツール見るとわかります。
class="form-inline"を適用した要素でくくるとよいみたいですよ。

html

1<td class="edit_received" style="width: 100px;"> 2 <div class="form-inline"> 3 <input type="text" maxlength="3" class="form-control fm" onclick="this.select();" 4 style="width: 50px; text-align: right; font-size: larger; padding: 3px;" 5 id="edit_received" name="edit_received" placeholder="000" /> 6 &nbsp;% 7 </div> 8</td>

投稿2018/08/02 13:43

hope_mucci

総合スコア4447

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

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

退会済みユーザー

退会済みユーザー

2018/08/02 23:38

ありがとうございます!無事改行せずに出力できました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問