HTML中如何将表格最外层边框设置成实线，内单元格边框设置成虚线？

最新推荐文章于 2024-06-14 01:10:08 发布

YyMU

最新推荐文章于 2024-06-14 01:10:08 发布

阅读量1w

点赞数 10

分类专栏：笔记文章标签： html css html5

本文链接：https://blog.csdn.net/qq_45103133/article/details/104803705

版权

笔记专栏收录该内容

1 篇文章

订阅专栏

如图中所示，最外层边框为实线，内部单元格边框为虚线
以下为HTML部分的一部分代码

<body>
    <form action="">
        <table>/*设置表格代码*/
            <th>同城网在线调查<th>
            <tr>
                <td>你从哪里知道同城的</td>
                <td>
                    <select name="where" id="1">
                        <option value="">朋友告知</option>
                        <option selected="selected">网上搜索</option>
                        <option value="">传单</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>你正在使用的同城网服务</td>
                <td>
                    <input type="checkbox">免费社区
                    <input type="checkbox">免费留言簿
                    <input type="checkbox">免费投票
                </td>
            </tr>
            <tr>
                <td>你希望我们提供哪些新服务</td>
                <td>
                    <input type="checkbox">聊天室
                    <input type="checkbox">博客
                    <input type="checkbox">游戏系统
                </td>
            </tr>
            <tr>
                <td>你是同城网的会员吗</td>
                <td>
                    <input type="radio">是
                    <input type="radio">不是
                </td>
            </tr>
            <tr>
                <td>你对同城网的其他意见</td>
                <td>
                    <textarea  id="01" cols="30" rows="10" style="overflow-y: scroll;"></textarea>
                </td>
            </tr>
            <tr aria-colspan="2">
                <td></td>
                <td><input type="submit" value="提交"></td>
            </tr>
        </table>
    </form>
</body>
</html>

以下为css代码部分

在这里插入代码片table,th{ 
   border-spacing: 0em;
   margin-left: 1px;
    border: 1px solid #220808;
    border-collapse: collapse;
}/*设置表格最外层边框实线*/
th{
    color: white;
    background-color: rgba(38, 45, 59, 0.767);
}
td{
    border: 1px dashed;
}/*设置单元格边框纵向虚线*/
tr{
    vertical-align: top;
    border: 1px dashed;
}/*设置单元格边框横向虚线*/