今天和大家说一下CSS如何设置table表格边框样式,对table设置CSS样式边框分为4种情况,以下分别详细讲解这四种情况需要怎么处理。

1、只对table设置边框

2、对td设置边框

3、对table和td技巧性设置表格边框

4、对table和td设置背景,实现完美表格边框

以下对以上几种实现html 表格边框样式进行讲解与案例演示。为了便于观察,divcss5均设置所有案例表格为1px实线红色边框为例;table宽度为400px;表格为三列三行,对以上四种情况表格外层加个div盒子,分别CSS命名为“.table-a”、“.table-b”、“.table-c”、“.table-d”。

只对表格table标签设置边框

只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式。

案例详细如下:

1、对应css代码

.table-a table{border:1px solid #F00}

/* css注释:只对table标签设置红色边框样式 */

2、对应html代码片段

站名 网址 说明
PHP www.php.cn php
php www.php.cn php

CSS设置table边框样式的方法就是这些了,有需要的朋友可以保存一下,也请大家持续关注本站的其他更新。

相关阅读:

php修改table样式,CSS怎么设置table边框样式相关推荐

  1. 如何修改控件边框的样式_Excel如何设置表格边框样式,记住这几个关键属性就懂了...

    Excel表格边框的设置,对于制作一个漂亮的工作表,十分有用. 由于审美的差异,我们通常做的表格都是以黑色边框白底为主,或者说,有些人根本不知道除了黑白表格还有带颜色的. 如何设置表格边框属性呢,下面 ...

  2. html表格居中设置css样式,css怎么设置table居中?

    一般情况下,页面中可以利用align进行页面的居中.靠左或者靠右对齐,但是采用CSS样式表来做更简单一些,下面我们来看一下使用css设置table居中的方法. css设置居中的方法: 1.利用marg ...

  3. html如何设置圆角效果,css怎么设置圆角边框样式?

    很多时候在开发网页前端的时候,为了让网页上面的东西看起来更加的舒服,我们可能需要设置一些圆角的效果,比如圆形的头像.圆角的按钮等等. 在css样式中有一个属性:border-radius属性是就常见 ...

  4. css修饰边框为虚线,css如何设置虚线边框css虚线样式?css设置虚线边框的方法示例...

    首页 >web前端>css教程>正文 css如何设置虚线边框?css设置虚线边框的方法示例 原创2018-10- 在网页布局中,有时候为了整体网页的美观可能需要设置虚线边框,那么虚线 ...

  5. html给input添加边框,html input怎么设置虚线边框样式

    html input设置虚线边框的方法:在input标签中使用style属性,添加"border-style: dashed;"或者"border:宽度值 dashed ...

  6. java导出excel设置边框_Excel如何设置表格边框样式,记住这几个关键属性就懂了

    Excel表格边框的设置,对于制作一个漂亮的工作表,十分有用. 由于审美的差异,我们通常做的表格都是以黑色边框白底为主,或者说,有些人根本不知道除了黑白表格还有带颜色的. 如何设置表格边框属性呢,下面 ...

  7. 用css来设置table的border

    在网页中table是一种很好的展示数据的标签.默认情况下,table是没有border的,但是我们为了好看,经常要给table加上border.而且IE7/8/9下border的颜色还不一样,下面我们 ...

  8. html设置table border,用css来设置table的border

    在网页中table是一种很好的展示数据的标签.默认情况下,table是没有border的,但是我们为了好看,经常要给table加上border.而且IE7/8/9下border的颜色还不一样,下面我们 ...

  9. css怎么设置列表颜色,css怎么设置table颜色

    css设置table颜色的方法:首先找到并打开需要设置的table代码内容:然后通过color属性设置表格中文字的颜色:最后通过background属性设置表格的背景颜色即可. 本文操作环境:wind ...

最新文章

  1. iis7下站点日志默认位置
  2. 降噪自动编码器:DAEs
  3. python网络爬虫(14)使用Scrapy搭建爬虫框架
  4. 1.Slf4j使用log4j的配置参数、配置sl4j/log4j输出到不同的文件、案例
  5. Combotree--别样的构建层级json字符串
  6. Linux引导过程与服务控制、排障演示及运行级别(详细图解)
  7. python示例_带有示例的Python功能指南
  8. matlab r2010a教程,MATLAB教程R2010a(十二五)
  9. 转贴:电子商务如何提升网站转化率之:谷歌9条
  10. aix 查看内存,CPU 配置信息
  11. C++STL源码剖析之vector
  12. 手机图片怎么压缩,简单的压缩方法
  13. word画流程图工具
  14. app移动端连接nginx时,总报错recv() failed (104: Connection reset by peer) while proxying upgraded connection
  15. ruoyi默认的端口8080被占用,修改前后端端口号
  16. GitHub免费开放所有核心功能;告别纸币-央行牵头数字货币
  17. Api 接口文档是什么?如何直接使用 ApiDoc 生成接口文档
  18. java获取usb设备的相关信息
  19. 国产工业软件仍未迎来黎明
  20. python定位二维码_python实现二维码、条形码识别

热门文章

  1. 全网最全黑群晖资源和教程--持续更新
  2. 高通指控苹果窃取其无线技术多年帮助英特尔,基带芯片研发难在哪?
  3. 空间应用--固态硬盘的极限挑战
  4. 微信安卓协议分析笔记(高清长图)
  5. 全球与中国家用自动烘干机市场深度研究分析报告
  6. 吊炸天!IntelliJ IDEA居然支持视频聊天了~速来尝鲜!网友:这尼玛有点牛逼哇!...
  7. 不愧是诸葛亮 先知啊!!
  8. 从部署EOSIO到部署智能合约
  9. shell 脚本之 echo
  10. 护士计算机考试免考,护士执业资格考试能免考吗