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わかる方，教えてください！お願いします！

回答No.2

retorofan · ベストアンサー

<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>

回答No.1

t_ohta

<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>