• ベストアンサー

HTML・CSS ボタンの表示

<div class="item"> <tr> <td><input type="button" value="サンドウィッチ" onclick="get_calc(this)"></td> <td><input type="button" value="おにぎり" onclick="get_calc(this)"></td> <td><input type="button" value="お茶" onclick="get_calc(this)"></td> <td><input type="button" value="お弁当" onclick="get_calc(this)"></td> </tr> </div> ボタンを画面の50%の幅に均一の大きさで表示したです. CSSわかる方,教えてください!お願いします!

質問者が選んだベストアンサー

  • ベストアンサー
  • retorofan
  • ベストアンサー率34% (435/1276)
回答No.2

<h2>CSS適用</h2> <pre> 手順は次のとおりです。 1 テーブルを親要素の半分の大きさにします。 2 テーブルの各セルがテーブルの幅の25%になるようにします。 3 ボタンがそのセルの幅いっぱいに広がるようにします。 </pre> <style> .item table { width: 50%; } .item td { width: 25%; } .item input[type="button"] { width: 100%; } </style> <div class="item"> <table> <tr> <td><input type="button" value="サンドウィッチ" onclick="get_calc(this)"></td> <td><input type="button" value="おにぎり" onclick="get_calc(this)"></td> <td><input type="button" value="お茶" onclick="get_calc(this)"></td> <td><input type="button" value="お弁当" onclick="get_calc(this)"></td> </tr> </table> </div>

その他の回答 (1)

  • t_ohta
  • ベストアンサー率38% (5238/13705)
回答No.1

<div class="item"> <table style="width:50%;table-layout:fixed;"> <tr> <td><input type="button" style="width:100%;" value="サンドウィッチ" onclick="get_calc(this)"></td> <td><input type="button" style="width:100%;" value="おにぎり" onclick="get_calc(this)"></td> <td><input type="button" style="width:100%;" value="お茶" onclick="get_calc(this)"></td> <td><input type="button" style="width:100%;" value="お弁当" onclick="get_calc(this)"></td> </tr> </table> </div>

関連するQ&A