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

最新推荐文章于 2021-06-03 21:08:23 发布

The_Best_Hacker

最新推荐文章于 2021-06-03 21:08:23 发布

阅读量2.3k

点赞数 1

分类专栏： javaWeb阶段文章标签： HTML button

本文链接：https://blog.csdn.net/The_Best_Hacker/article/details/82988066

版权

javaWeb阶段专栏收录该内容

55 篇文章 18 订阅

订阅专栏

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

The_Best_Hacker

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何使button自动填充table的单元格

【题目需求】：如何使button自动填充table的单元格原代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;script&g
复制链接

扫一扫

专栏目录