如何去除<table>标签中的重复的边框

例如:
<table border="1" cellspacing="0" cellpadding="0">
	<tr>
	    <th>选择器</th>
	    <th>类型</th>
	    <th>功能描述</th>
	    <th>Header</th>
	</tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
</table>

这里的表格是有边框的:

里面的表格的边框是重复的;

当你加入代码:

<style type="text/css">
    table{
	border: 0;
    }
</style>

表格会显示双的重复的线条解决的方法是:

<style type="text/css">
    table{
	border: 0;
        border-collapse: collapse;//去掉重复的边框
     }
</style>




<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>豆瓣列表页</title> <link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css” rel=“stylesheet”> <style> body { width: 100%; margin: 0; background-image: url(“/static/6.jpg”); background-size: cover; } h1 { color: rgb(35, 140, 205); text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } a { color: white; background-color: rgb(35, 140, 205); text-decoration: none; border-radius: 8px; padding: 3px 10px; margin: 0 5px; } a:hover { background-color: rgb(20, 90, 150); } table { width: 90%; margin: 0 auto; border: 2px solid black; border-collapse: collapse; margin-top: 0; /* 确保表格顶部没有多余外边距 / } table, tr, td { border: 2px solid black; border-collapse: collapse; } td { text-align: center; line-height: 35px; } .adc { background-color: rgb(35, 140, 205); color: white; font-size: 18px; font-weight: bold; } .z { color: rgb(0, 0, 0); font-size: 20px; } form { margin-bottom: 0; / 移除搜索框底部的外边距 */ } input[type=“text”] { padding: 8px; border-radius: 4px; border: 1px solid #ccc; width: 50%; } input[type=“submit”] { padding: 8px 25px; background-color: rgb(35, 140, 205); color: white; border: none; border-radius: 4px; cursor: pointer; } input[type=“submit”]:hover { background-color: rgb(20, 90, 150); } </style> </head> <body> <div class="container text-center py-5"> <h1 class="display-4">欢迎使用豆瓣网</h1> <p> <a href="/">首页</a> <a href="/list">电影类型列表</a> <a href="/add">添加电影类型</a> <a href="/addMovie">添加电影</a> <a href="/zhu" target="_blank">查看柱状图</a> <a href="/bing" target="_blank">查看饼状图</a> <a href="/zhe" target="_blank">查看折线图</a> </p> <form action="/sousuoSubmit" method="post" class="mt-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="请输入电影名称" name="a" required> <button type="submit" class="btn btn-primary">搜索</button> </div> </form> </div> <!--{{info}}--> <table> <tr class="adc"><td>编号</td><td>名称</td><td>内容</td><td>创建日期</td><td>操作</td></tr> {% for i in info %} <tr class="z"><td>{{i[0]}}</td><td>{{i[1]}}</td><td>{{i[2]}}</td><td>{{i[3]}}</td><td> <a href="/update/{{i[0]}}">修改</a> <a href="/delete/{{i[0]}}">删除</a> <a href="/movielist/{{i[0]}}">查看</a> </td></tr> {% endfor %} </table> </body> </html>移除多余的部分,并添加注释
最新发布
05-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值