老师，请问小单元格中灰色边框效果和小单元格边框线条的粗细这么设置？
来源：3-2 项目作业
慕村梦花火
2020-03-07 11:24:38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index.html</title>
<style>
table{
border-collapse: collapse;
}
.text{
border-style:groove;
}
</style>
</head>
<body>
<table>
<thead>
<table width="100%" bgcolor="#169bd5">
<tr>
<td height="56px"><img src="images/logo.png" alt=""></td>
</tr>
</table>
</thead>
<tbody>
<table width="100%" border="3px double gray">
<tr>
<td width="12%" valign="top">
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p>
<br>
<p><b>全部订单</b></p>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p>
<br>
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</td>
<td width="88%" border="1px solid gray" height="50px">
<table border="1px solid gray" width="100%">
<tr height="50px"><td>全部订单</td></tr>
</table>
<table border="1" width="100%">
<tr height="50px">
<td>
查询：<input type="date" name="" id="">
至<input type="date" name="" id="">
</td>
</tr>
</table>
<table border="1" width="100%" align="center" >
<tr height="50px" align="center">
<td colspan="2" >宝贝信息</td>
<td>表单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr height="54px" align="center" >
<td height="54px">
<img src="images/txue.png" alt="" height="54px">
</td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54px" align="center">
<td>
<img src="images/xie.jpg" alt="" height="54px">
</td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小李子</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr height="54px" align="center">
<td>
<img src="images/txue.png" alt="" height="54px">
</td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小红</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr height="54px" align="center">
<td>
<img src="images/xie.jpg" alt="" height="54px">
</td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>可乐</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr height="54px" align="center">
<td>
<img src="images/txue.png" alt="" height="54px">
</td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>魏明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr height="54px" align="center">
<td>
<img src="images/xie.jpg" alt="" height="54px">
</td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>李晓雨</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr height="54px" align="center">
<td>
<img src="images/txue.png" alt="" height="54px">
</td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>艳艳</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr height="54px" align="center">
<td>
<img src="images/xie.jpg" alt="" height="54px">
</td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>片片</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr height="54px" align="center">
<td>
<img src="images/txue.png" alt="" height="54px">
</td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小兰</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr height="54px" align="center">
<td>
<img src="images/xie.jpg" alt="" height="54px">
</td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>魏璎珞</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr height="54px" align="center">
<td>
<img src="images/txue.png" alt="" height="54px">
</td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小慕</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr height="54px" align="center">
<td class="text">
<img src="images/txue.png" alt="" height="54px">
</td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小苏</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>未发货</td>
</tr>
</table>
</td>
</tr>
</table>
</tbody>
<tfoot>
<table width="100%">
<tr height="60px" align="center" bgcolor="#169bd5">
<td align="center">2019-9-21 ©imooc.com</td>
</tr>
</table>
</tfoot>
</table>
</body>
</html>
1回答
-
同学你好，这个就是两个table边框叠加在一起，所以会变粗。另外，在boder属性中是不能设置边框颜色的，应该在css样式中设置。建议把html标签中的border属性去掉，然后给每一个table清除默认间隙，不然两个table的边框无法连在一起。
（这里不一一截图了，给每一个table标签都添加如上）
在css样式中设置边框：
左侧单元格添加一个类名
因为右侧边框与左侧单元格也需要叠加边框，所以单独给左侧单元格设置一个右边框。
另外，里面的小单元格粗细是一样的，不需要设置。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
1
相似问题