如何使button自动填充table的单元格

【题目需求】:如何使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>

猜你喜欢

转载自blog.csdn.net/The_Best_Hacker/article/details/82988066