Q&A現在tableタグを使用して表を実装していますが、
画面いっぱいにthタグを１２個並べて、それぞれのthのテキスト文字数に合わせてthの幅指定をしたいのですが、
現在いくつかのthのテキストが縦に表示されてしまっております。（下記コードを実装してみてください。）
これをbootstarapで綺麗に幅指定して実装することはできないのでしょうか。
わかりづらい質問ですみませんが、お分かりになる方お願いいたします！
html
1 2<div class="col-12"> 3 <table class="table m-2 table-hover text-vertical-middle responstable table-bordered"> 4 <thead> 5 <tr class="text-white bg-info"> 6 <th class=" text-center">関連</th> 7 <th class="text-center">ID</th> 8 <th class="text-center">作成日</th> 9 <th class="text-center">発注元</th> 10 <th class="text-center">仕入先</th> 11 <th class="text-center">作業担当者<span>(必)</span></th> 12 <th class="text-center col-2">チケット名<span>(必)</span></th> 13 <th class="text-center">作成種別<span>(必)</span></th> 14 <th class="text-center w-25">数量</th> 15 <th class="text-center"><span>Status</span></th> 16 <th class="text-center">変更</th> 17 <th class="text-center">期限</th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr> 22 <td class="text-center"> 23 <input type="checkbox" name="connection" value=""> 24 </td> 25 <td class="text-center">1234567</td> 26 <td class="text-center">2021/03/10</td> 27 <td class="text-center"> 28 <select id="発注元" name="client"> 29 <option value="">発注元文字数10文字</option> 30 </select> 31 </td> 32 <td class="text-center"> 33 <select id="仕入先" name="supplier"> 34 <option value="">仕入先A文字10文字</option> 35 </select> 36 </td> 37 <td class="text-center"> 38 <select id="作業担当者" required name="worker"> 39 <option value="">A担当者７文字</option> 40 </select> 41 </td> 42 <td class="text-center"> 43 <input type="text" required value="撮影（文字数20文字）" name="ticketname" class="form-control"> 44 <label>TO</label> 45 <input type="checkbox" name="TO" value="TO"> 46 </td> 47 <td class="text-center"> 48 <select id="作成種別" required name="Type"> 49 <option value="">個数計算</option> 50 <option value="0">時間計算</option> 51 <option value="1">見積書名</option> 52 </select> 53 </td> 54 <td class="text-center w-25" style="width: 10% !important"> 55 <span>15</span> 56 <span>80</span> 57 </td> 58 <td class="text-center"> 59 </td> 60 <td class="text-center"> 61 <select id="Status" name="Status"> 62 <option value="">作業中</option> 63 <option value="0">提出済</option> 64 <option value="1">一部納品済</option> 65 </select> 66 </td> 67 <td class="text-center"> 68 <label class="deadline-mark"> 69 <span>︙</span> 70 </label> 71 </td> 72 </tr> 73 <tr> 74 <td class="text-center"> 75 <input type="checkbox" name="connection" value=""> 76 </td> 77 <td class="text-center"> 78 </td> 79 <td class="text-center"> 80 <input type="text" name="Description" id="Description" placeholder="詳細を入力してください"> 81 </td> 82 </tr> 83 </tbody> 84 </table> 85 </div> 86 <button class="btn btn-secondary mx-auto d-block">更新</button> 87 88 <div class="col-4 offset-8"> 89 <table class="table m-2 table-hover text-vertical-middle w-40 table-bordered"> 90 <thead> 91 <tr> 92 <th>項目名</th> 93 <th>依頼数</th> 94 <th>提出済</th> 95 <th>納品済</th> 96 <th>受注数</th> 97 </tr> 98 </thead> 99 <tbody> 100 <tr> 101 <td>時間計</td> 102 <td>100h</td> 103 <td>50h</td> 104 <td>35h</td> 105 <td>65h</td> 106 </tr> 107 <tr> 108 <td>時間計</td> 109 <td>100h</td> 110 <td>50h</td> 111 <td>35h</td> 112 <td>65h</td> 113 </tr> 114 </tbody> 115 </table> 116 </div>
回答1件
0
自己解決
bootstrap４で難しそうなので、それぞれに幅指定をすることにし、解決とさせていただきます。
投稿2021/04/18 08:27
総合スコア25
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。