如何用css去除表格内、外边距和边框

html-css033

如何用css去除表格内、外边距和边框,第1张

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<style>标签中，输入css代码：td {padding: 0}。

3、浏览器运行index.html页面，此时成功用css去除了表格的边框和边距。

<textarea style="border:nonewidth:200pxheight:30px"></textarea>

你可以按上面的CSS代码试一下。border:none这个表示隐藏边框。

1、我们首先展示最原始的代码和效果。默认情况下，表中直接用td划分的表将隐藏边框。

2、接下来，我们使用css添加样式并为表添加边框。表{边框：1px solid＃804040}修改后的效果是整个表格具有外边框，并且表格中没有边框。

3、然后我们使用css为td添加边框。表td {边框：1px solid＃804040}修改后的效果是每个td都添加了边框，显示效果是表格显示单个边框。

4、接下来，td显示左上角，表格显示右下角，实现边框表效果。表{Border-right：1px solid＃804040边框底部：1px实心＃804040}

表td {边框左：1px solid＃804040Border-top：1px solid＃804040}修改后的效果与预期的一样，但由于内部单元之间的间距，内部边界不连续。

5、最后，我们在表中添加了css代码：border-collapse：collapse用来消除单元格间距。这是：表{Border-right：1px solid＃804040边框底部：1px实心＃804040边境崩溃：崩溃}

表td {边框左：1px solid＃804040Border-top：1px solid＃804040}修改后，消除了单元间距，完美地实现了效果。