【题目需求】:如何使button自动填充table的单元格
原代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<script>
input:{
style="width:100%";
}
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<td colspan="4"><input style="height:50px" type="text"></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" value="7"></td>
<td><input type="button" value="4"></td>
<td><input type="button" value="1"></td>
<td><input type="button" value="="></td>
</tr>
<tr>
<td><input type="button" value="8"></td>
<td><input type="button" value="5"></td>
<td><input type="button" value="2"></td>
<td><input type="button" value="0"></td>
</tr>
<tr>
<td><input type="button" value="9"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="3"></td>
<td><input type="button" value="."></td>
</tr>
<tr>
<td><input type="button" value="+"></td>
<td><input type="button" value="-"></td>
<td><input type="button" value="*"></td>
<td><input type="button" value="/"></td>
</tr>
</tbody>
</table>
<script></script>
</body>
</html>
原代码输出:
样例输出:
【解决方式】
方式一:针对单条语句
<td><input style="width:100%" type="button" value="8"></td>
方式二:针对整体样式修改在
<head> <style> input{ width: 100%; } </style> </head>