HTML5中Table如何消除边框（TD）间距

用html5制作表格时，只是简单的想要实现表格内有边框，结果出现了双边框和单元格独立（有间距）的问题。本为大家分享一下我的处理过程及解决方法。

操作方法

  • 01

    首先为大家展示一下最原始的代码和效果。直接在table中用td划分的表格会默认隐藏边框。

  • 02

    接下来我们用css来增加样式，为table增加边框。 table { border: 1px solid #804040; } 修改后的效果是整个table增加了外边框，table内还是没有边框。

  • 03

    然后我们用css来为td增加边框。 table td { border: 1px solid #804040; } 修改后的效果是每个td都增加了边框，显示效果为table全部显示单边框。

  • 04

    接下来我采用了网上普遍推荐的方法，即td显示左上两个边，table显示右下两个边，进而实现但边框表格效果。 table { border-right: 1px solid #804040; border-bottom: 1px solid #804040; } table td { border-left: 1px solid #804040; border-top: 1px solid #804040; } 修改后的效果符合预期，但是内部边框显示不连续，原因是内部单元格之间有间距。

  • 05

    最后，我们在table中增加css代码：border-collapse:collapse;用来消除单元格间距。 即： table { border-right: 1px solid #804040; border-bottom: 1px solid #804040; border-collapse:collapse; } table td { border-left: 1px solid #804040; border-top: 1px solid #804040; } 修改后单元格间距消除，完美实现效果。

  • 06

    以上是我的处理方法，希望能帮助到大家。

赞 (0)

相关推荐

  • html中table表单如何应用？

    html中table表单如何应用?我们这边以条款案例来说明 操作方法 01 如图所示先写外边框的内容.<table></table>中align="center&qu ...

  • 如何在Word中为图片添加边框效果(图文)

    如何在Word中为图片添加边框效果： (1)选中要添加边框的图片，单击“格式→边框和底纹”命令，打开“边框和底纹”对话框。在“边框”选项卡下选择边框样式、线型及颜色等，如图3-22所示。 (2)设置完 ...

  • 如何给Word文档中的图片添加边框的入门动画教程

    如何给Word文档中的图片添加边框的入门动画教程

    要给Word文档中的图片添加边框,可按以下步骤进行: 1.选中需要添加边框的图片. 2.使用"绘图"工具栏或"图片"工具栏上的"线型"按钮. ...

  • 怎样在Word2010文档中设置剪贴画边框

    在Word2010文档中，用户可以为选中的剪贴画设置多种颜色、多种粗细尺寸的实线边框或虚线边框。实际上，当用户使用Word2010预设的剪贴画样式时，某些样式已经应用了剪贴画边框。当然，用户也可以根据 ...

  • 在word2010中如何设置表格边框底纹

    在Word2010中，用户不仅可以在“表格工具”功能区设置表格边框，还可以在“边框和底纹”对话框设置表格边框，操作步骤如下所述： 第1步，打开Word2010文档窗口，在Word表格中选中需要设置边框 ...

  • 如何在Word中为图片添加边框效果

    如何在Word中为图片添加边框效果： (1)选中要添加边框的图片，单击“格式→边框和底纹”命令，打开“边框和底纹”对话框。在“边框”选项卡下选择边框样式、线型及颜色等，如图3-22所示。 (2)设置完 ...

  • word 2010 中怎么调整行间距与段间距

    在使用word中，我们可以通过调整间距来解决因段落或者是行间距而影响美观的问题 一、选择需要增加间距的文字‘ 二、点击word2010软件上自带的段落功能; 三、在间距下，单击段前、段后和行距的三角按 ...

  • Word2003中表格如何删除边框线条

    关于Word2003中表格如何删除边框线条的解决方法如下: 1.选中图片. 2.点击图片后,再点击"图片工具"下的格式,"图片边框". 3.点击图片边框工具,选 ...

  • 如何在Word2010中为文字添加边框?

    选择要添加边框的字符,单击[字体]组中的[字符边框]按钮,如图所示. 效果如图所示. 用户也可以单击[段落]组中的[框线]下拉按钮,选择[所有框线]选项,为所选字符添加边框效果,如图所示. 效果如图所 ...