关于css和html的问题求前端认识赐教

发布于 2021-11-29 19:14:46 字数 1863 浏览 733 评论 6

</style>

上面是css 这个是把lable对其一个tr有几个input对其但是最后一行的textarea怎么占满一个tr

谢谢各位大哥大姐

或者有没有好的封装直接用css引用到table上就可以很简单的实现对齐啊

这个备注怎么占满

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

够钟 2021-12-04 18:39:47

你好我的table标签设置整个table居中为和外部引入css文件的方式就是就在顶部呢

回复收藏 0

鹤舞 2021-12-04 18:23:19

还有非常感谢你的回答

回复收藏 0

平定天下 2021-12-04 18:08:42

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>print</title>
    <style>
html,body,div,input,textarea {margin:0;padding:0;}

.tb {margin:0 auto;font-size:12px;}
.tb, .tb td {border-collapse: collapse; border:1px solid red;}
.tb td {padding:4px;height:2em;}
.tb td label,.tb td textarea, .tb td input {vertical-align: middle;}

.w1{display: flex;}
.w1 textarea{flex:1;}

.w2 label{float:left;}
.w2 div {overflow: hidden;}
.w2 div > textarea{width:100%;box-sizing: border-box;/*textarea默认的边框是1px，默认的box类型content-box会导致整体宽度多2px*/}

.w3 label{float:left;}
.w3 div {overflow: hidden;padding:0 2px 0 0;}
.w3 div > textarea{width:100%;}
</style>
</head>
<body>
<table class="tb">
    <tr>
        <td class=""><label>名称：</label><input type="text" id="name" name="name"/></td>
        <td class=""><label>地址：</label><input type="text" id="name" name="name"/></td>
    </tr>
    <tr>
        <td class="" colspan="2">
            <div class="w1">
                <label>备注：</label>
                <textarea></textarea>
            </div>
        </td>
    </tr>
    <tr>
        <td class="" colspan="2">
            <div class="w2">
                <label>备注：</label><div><textarea></textarea></div>
            </div>
        </td>
    </tr>
    <tr>
        <td class="" colspan="2">
            <div class="w3">
                <label>备注：</label><div><textarea></textarea></div>
            </div>
        </td>
    </tr>
</table>
</body>
</html>

三种方案，.w1是flexbox，.w2是box-sizing，.w3是常规模式。

兼容性从差到强，具体css属性的兼容性，可以自己查一查。

回复收藏 0