怎么做的跟图片上的边框一样？
来源：3-2 项目作业
所向无一
2019-04-06 18:41:28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实训作品</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
img{
height: 54px;
width: 80px;
}
table{
border-color: #eee;
border-collapse: collapse;
}
</style>
</head>
<body>
<!-- container -->
<table width="100%">
<!-- header -->
<thead>
<tr height="60px" bgcolor="#00bfff" valign="middle">
<td>
<img src="img/logo.png" alt="logo">
</td>
</tr>
</thead>
<!-- mian -->
<tbody>
<tr>
<td>
<table width="100%" cellpadding="0" border="3" cellspacing="0">
<tr>
<!-- main-left -->
<td width="12%" valign="top">
<br> 商品管理<br><br>
评价管理<br><br>
咨询管理<br><br><br><br>
<strong>全部订单</strong><br><br>
已完成订单<br><br>
待处理订单<br><br>
今日物流<br><br><br><br>
月考核<br><br>
季度考核<br><br>
年度考核<br>
</td>
<!-- main-right -->
<td width="88%" valign="top" cellspacing="0">
<!-- main-right-top -->
<table width="100%" height="50px" border="6" cellspacing="0">
<tr>
<td> 全部订单</td>
</tr>
</table>
<!-- main-right-middle -->
<table width="100%" height="50px" border="6" cellspacing="0">
<tr>
<td>
查询：<input type="date" name="beforetime">至<input type="date" name="nowtime">
</td>
</tr>
</table>
<!-- mian-right-bottom -->
<table width="100%" border="6" rules="all" cellspacing="0">
<tr valign="middle">
<td colspan="2" height="50px">宝贝信息</td>
<td height="50px">订单数量</td>
<td height="50px">单价</td>
<td height="50px">买家</td>
<td height="50px">下单时间</td>
<td height="50px">实付款</td>
<td height="50px">订单操作</td>
</tr>
<tr valign="middle">
<td><img src="img/txue.png" alt="txue"></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 valign="middle">
<td><img src="img/xie.jpg" alt="xie"></td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小李子</td>
<td>2019-2-21 19:04</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr valign="middle">
<td><img src="img/txue.png" alt="txue"></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小红</td>
<td>2019-2-21 16:54</td>
<td>240</td>
<td>待发货</td>
</tr>
<tr valign="middle">
<td><img src="img/xie.jpg" alt="xie"></td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>可乐</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr valign="middle">
<td><img src="img/txue.png" alt="txue"></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>魏明</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr valign="middle">
<td><img src="img/xie.jpg" alt="xie"></td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>李晓雨</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr valign="middle">
<td><img src="img/txue.png" alt="txue"></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>艳艳</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr valign="middle">
<td><img src="img/xie.jpg" alt="xie"></td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>片片</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr valign="middle">
<td><img src="img/txue.png" alt="txue"></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小兰</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr valign="middle">
<td><img src="img/xie.jpg" alt="xie"></td>
<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>魏璎珞</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr valign="middle">
<td><img src="img/txue.png" alt="txue"></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小慕</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr valign="middle">
<td><img src="img/txue.png" alt="txue"></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小苏</td>
<td>2019-2-21 14:30</td>
<td>240</td>
<td>未发货</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- footer -->
<tfoot>
<tr height="60px" bgcolor="#00bfff" valign="middle">
<td>
2019-9-21 ©imooc.com
</td>
</tr>
</tfoot>
</table>
</body>
</html>写回答
2回答
-
好帮手慕星星
2019-04-07
你好，可以设置border为0，使用cellspacing属性，table设置一个颜色，tr设置另一个颜色，剩下的就是cellspacing的颜色，例如：
<table width="100%" border="0" cellpadding="0" bgcolor="#ddd" cellspacing="3px"> <tr bgcolor="#fff" height="50px"> <td>imooc</td> </tr> </table>
效果：
自己可以测试下，祝学习愉快！
0h019-04-11 -
尤尼酱
2019-04-07
border用CSS来控制 table的边框设置成2px 主体右边table里面 的td设置成1px的border
0
相似问题