用新的边框我们先要除去旧的边框才可以，然后再给他加上新边框，如下：
一，先除去：
1，看下默认样式效果，如图可以看到，默认padding和border，字体大小也是受浏览器默认指定
2，去除padding，指定一个字体大小，这里匹配了*表示所有元素，因为大部分的默认margin和padding都需要先去除，统一去除，后面需要再单独有针对性的添加
*{
margin: 0
padding: 0
font-size: 100%
}
3，默认padding去除之后，按钮之间有间隙，这是inline-block默认的间距，用float来去除，并指定合适的宽和高
button{
float: left
width: 60px
height: 60px
}
4，间距去掉了，但都显示成一行了，这个是因为添加的浮动影响的，可以在div元素后面去除浮动
div:after{
content: ""
display: block
clear: both
}
5，此时，可以看到边框重叠导致边框宽度不一致，需要自定义边框
border: 1px solid black
margin-right: -1px
margin-bottom: -1px
6，从上面的图中，可以看到，在鼠标点击按钮的时候，会有蓝框选择的样式
加上outline: none来去除
二，再加上是使用如下的编程方法：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
div{
width:200pxheight:100pxborder-bottom:1px solid #CCC}
</style>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
导致会出现边框的原因是CSS的默认设置，所以只要把这个默认设置改掉就可以了。然后就可以加上你想要的边框了哦！
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。
2、在index.html中的<style>标签中，输入css代码：td {padding: 0}。
3、浏览器运行index.html页面，此时成功用css去除了表格的边框和边距。
你需要控制一下，thead th:first-child{border-left:none}
thead th:last-child{border-right:none}
tbody td:first-child{border-left:none}
tbody td:last-child{border-right:none}
