精华内容
下载资源
问答
  • CSS表格折叠边框

    千次阅读 2018-11-27 17:23:48
    一般我们用table的border属性来设置表格的边框(当然也可以在style中声明样式border),但显示表格时总会发现表格有双边框 系不系很丑? 这是因为表和th/ td元素都有独立的边界。 而如果我们想去除表格的双边框...

    折叠边框

    一般我们用table的border属性来设置表格的边框(当然也可以在style中声明样式border),但显示表格时总会发现表格有双边框

    双边框

    系不系很丑?

    这是因为表和th/ td元素都有独立的边界

    而如果我们想去除表格的双边框的现象,这时就用到了我们的折叠边框属性border-collapse了,可以对表格做如下设置:

    CSS:

    table {
        border-collapse: collapse;
    }

    HTML:

    <table border="1">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    </tr>
    <tr>
    <td>Peter</td>
    <td>Griffin</td>
    </tr>
    <tr>
    <td>Lois</td>
    <td>Griffin</td>
    </tr>
    </table>

    啦啦啦。。。这时就没有双边框了

    无双边框

    但是要注意的是如果没有指定HTML文档类型 !DOCTYPE , border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。

    下面附上一个比较好看的表格demo

    CSS:

    #customers
    {
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	width:100%;
    	border-collapse:collapse;
    }
    #customers td, #customers th 
    {
    	width:33%;
    	font-size:1em;
    	border:1px solid #98bf21;
    	padding:3px 7px 2px 7px;
    }
    #customers th 
    {
    	font-size:1.1em;
    	text-align:left;
    	padding-top:5px;
    	padding-bottom:4px;
    	background-color:#A7C942;
    	color:#ffffff;
    }
    #customers tr.alt td 
    {
    	color:#000000;
    	background-color:#EAF2D3;
    }

    HTML:

    <table id="customers">
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    </tr>
    <tr class="alt">
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
    </tr>
    <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    </tr>
    <tr class="alt">
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    </tr>
    <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    </tr>
    <tr class="alt">
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
    </tr>
    <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    </tr>
    <tr class="alt">
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    </tr>
    <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
    </tr>
    <tr class="alt">
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
    </tr>
    </table>

     结果就是:

    漂亮表格

     

    展开全文
  • layui表格单选、复选

    千次阅读 2019-06-17 11:18:49
    layui表格开启单选,只需要在渲染表格,设置表头的时候加上 { type: ‘radio’ } 效果图: layui表格复选 layui表格开启复选,只需要在渲染表格,设置表头的时候加上 { type: ‘checkbox’ } 效果图: ...
    开发工具与关键技术:VS2015,layui插件
    
    撰写时间:2019年6月17日
    

    layui表格单选框

    layui表格开启单选框,只需要在渲染表格,设置表头的时候加上 { type: ‘radio’ }
    在这里插入图片描述
    效果图:
    在这里插入图片描述
    layui表格复选框

    layui表格开启复选框,只需要在渲染表格,设置表头的时候加上 { type: ‘checkbox’ }
    在这里插入图片描述
    效果图:
    在这里插入图片描述

    参考layui官方文档

    展开全文
  • CSS设置表格的边框

    千次阅读 2016-10-16 19:16:13
    CSS设置表格的边框  HTML中标记,其中很多关于表格边框的属性。... Bordercolor属性设置表格边框的颜色,采用十六进制的颜色RGB模式,但是,两个浏览器对该属性的支持明显的差别,因此,不推荐使用。

    CSS设置表格的边框


              HTML中<table>标记,其中有很多关于表格边框的属性。

              Border属性用于设置表格边框的粗细,当值为0时,表明表格没有边框。

              Bordercolor属性设置表格边框的颜色,采用十六进制的颜色RGB模式,但是,两个浏览器对该属性的支持有明显的差别,因此,不推荐使用。

              <table border="5"bordercolor="#007eff">

              CSS通过border属性来设置边框,设置方法和图片的边框完全一样,但是,在表格中需要注意单元格之间的关系。

              当代码如下,仅仅是设置表格的边框时,单元格不会有任何的边线。

    <span style="font-size:24px;">.datalist{
           border:1pxsolid #007eff;
           font-family:Arial;
    }</span>

              因此,使用CSS设置表格的边框时,也需要为单元格单独设置边框,代码如下:

    <span style="font-size:24px;">.datalist th, .datalist td{
    	border:1px solid #429fff;
    }</span>

              此时,会发现单元格的边框之间有间隙,需要设置CSS中整个表格的border-collapse属性,使边框重叠在一起,代码如下:

    <span style="font-size:24px;">.datalist{
           border:1pxsolid #007eff;
           font-family:Arial;
           border-collapse:collapse;
    }</span>
              最后,综合文字字体、大小和颜色等的设置即可,代码如下:

    <span style="font-size:24px;"><html>
           <head>
                  <title>
                         年度收入
                  </title>
                  <style>
                         <!--
                         .datalist{
                         border:1pxsolid #429fff;
                         font-family:Arial;
                         border-collapse:collapse;
                  }
                         .datalistcaption{
                         padding-top:3px;
                         padding-bottom:2px;
                         font:bold1.1em;
                         background-color:#f0f7ff;
                         border:1pxsolid #429fff;
                  }
                         .datalistth{
                         border:1pxsolid #429fff;
                         background-color:#d2e8ff;
                         font-weight:bold;
                         padding-top:4px;padding-bottom:4px;
                         padding-left:10px;padding-right:10px;
                         text-align:center;
                  }
                         .datalisttd{
                         border:1pxsolid #429fff;
                         text-align:right;
                         padding:4px;
                  }
                         -->
                  </style>
           </head>
          
           <body>            
                  <tablesummary="This table shows the yearly income for years 2004 through2007" border="1">
                         <caption>年度收入2004-2007</caption>
                         <tr>
                                <th></th>
                                <thscope="col">2004</th>
                                <thscope="col">2005</th>
                                <thscope="col">2006</th>
                                <thscope="col">2007</th>
                         </tr>
                         <tr>
                                <thscope="row">捐款</th>
                                <td>11.980</td>
                                <td>12.650</td>
                                <td>9.700</td>
                                <td>10.600</td>
                         </tr>
                         <tr>
                                <thscope="row">拨款</th>
                                <td>11.980</td>
                                <td>12.650</td>
                                <td>9.700</td>
                                <td>10.600</td>
                         </tr>
                         <tr>
                                <thscope="row">投资</th>
                                <td>11.980</td>
                                <td>12.650</td>
                                <td>9.700</td>
                                <td>10.600</td>
                         </tr>
                         <tr>
                                <thscope="row">募捐</th>
                                <td>11.980</td>
                                <td>12.650</td>
                                <td>9.700</td>
                                <td>10.600</td>
                         </tr>
                         <tr>
                                <thscope="row">销售</th>
                                <td>11.980</td>
                                <td>12.650</td>
                                <td>9.700</td>
                                <td>10.600</td>
                         </tr>
                  </table>
           </body>
    </html></span>


    展开全文
  • 解决ElementUI table表格的边框隐藏

    万次阅读 多人点赞 2019-01-16 18:14:10
    解决ElementUI table表格的边框隐藏发现问题解决写在最后 发现问题 我方产品将于五秒后到达战场… 刚在对照原型做项目的时候突然发现了这样一个表格: 产品说他的这个数据表表格不要周边的边框,但是中间要边框分隔...

    解决ElementUI table表格的边框隐藏

    发现问题

    我方产品将于五秒后到达战场…
    刚在对照原型做项目的时候突然发现了这样一个表格:
    在这里插入图片描述
    产品说他的这个数据表表格不要周边的边框,但是中间要边框分隔,嗯?这是什么需求,我说这个不好弄,产品说我就要,如何实现我不管。那我能怎么办呢(摊手),于是我找了下文档。嘿!找到了!border!
    在这里插入图片描述
    于是我兴高采烈的加上了这行代码:

        <el-table
          border
          :data="dataList"
    

    加完之后:
    在这里插入图片描述
    嗯?这个四周的边框是什么鬼??
    在这里插入图片描述

    解决

    看来还得接着改,于是一层一层地去找DOM,发现Element用的方法和我们平常写表格类似,最外面的父级写上“上左”border,内容写“右下”border,于是我赶紧重置:border:none;设置完之后一看,“上左”border确实没了,“右下”border怎么还在,看来不是这样写的?于是我又找了一遍,可算给我找着了:原来Element在写“右下”border的时候用的是伪类:
    在这里插入图片描述
    不厚道啊小老弟,又用绝对定位,既然找到了那就开干啦(注意:在你的重置样式表或者common.css内添加,不要放到当前组件的scoped中,会不起作用):

      .el-table--border, .el-table--group{
        border: none;
      }
      .el-table__header-wrapper th:nth-last-of-type(2){
        border-right: none;
      }
      .el-table--border td:nth-last-of-type(1){
        border-right: none;
      }
      .el-table--border::after, .el-table--group::after{
        width: 0;
      }
    

    效果如下:
    在这里插入图片描述
    完成!

    写在最后

    代码是撸不完的。。。这辈子撸不完的。。。加油哦小老弟们。希望这边文档能给您带来一些帮助,感谢阅读。

    展开全文
  • 如下小程序为使用python+opencv将表格图片,按照表格进行分割,并识别分割后的子图片中的文字,希望对需要的小伙伴一些些帮助。具体的实现见如下代码。 # -*- coding: utf-8 -*- Created on Tue May 28 19:23:19...
  • 一定的参考价值,需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来看看给table表格添加边框后,它的默认效果: 1 2 3 4 5 6 table,table td{ border...
  • 表格线边框重复css解决方法

    千次阅读 2017-01-17 18:28:47
    表格线常见问题: 1.表格边框与表格单元格线的重叠。[采用border-collapse:collapse解决] 2.嵌套表格与被嵌套表格边线重叠问题。[采用border-top|left|right|bottom...4.border-collapse两个属性,separate 和 colla
  • 很漂亮的表格框样式 奇数与偶数行变化样式
  • HTML 去除表格单元格边框间隙

    千次阅读 2020-02-28 22:45:43
    <!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <table border="1" > <tr> <th>NAME</th>.../th...
  • 今天小编就为大家分享一篇pandas dataframe添加表格框线输出的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 作为后台研发写js和样式就头大,但是后台管理往往不需要...在实现动态增加表格input,并且提交时校验表格的数据;重点在于prop绑定的对象; <el-table :data="formData.tableDataList" > <el-form-item
  • 一个用CSS设置table表格的双边框的方法,顺便记录一下。话不多说,直接代码! table { width: 400px;//表格的宽度 border-top: 1px solid #999; border-left: 1px solid #999; border-spacing: 0;/*把单元格...
  • css中表格的细线边框

    千次阅读 2020-09-14 10:41:38
    可以看到小明的边框和男的做边框出现了重叠 从而使边框变粗 通过css属性: table { border-co1lapse:co1lapse; } collapse单词是合并的意思 border-collapse:collapse;表示相邻边框合并在一起。 运行图如下: ....
  • 在APP.vue中的style标签内加上 body .el-table th.gutter{ display: table-cell!important; }
  • 表格细线边框的做法

    千次阅读 2008-03-05 16:39:00
    方法1:把表格的cellspacing设置为1,cellpadding和border均为0,分别填充表格的背景色和单元格的背景色。举例如下:   <td></td>  <trbgcolor="#FF
  • vue + elementUI 表格多选选中 回显

    千次阅读 2019-07-24 19:22:51
    那么想要实现table的多选回显,前提得多选,而实现回显也主要依赖多选自带的几个事件,当表格存在多选时这几个事件便可以生效: <el-table ref="multipleTable" :data="carData" :empty-t...
  • python+opencv将表格图片按照表格框线分割、识别

    千次阅读 多人点赞 2019-06-01 15:22:58
    如下小程序为使用python+opencv将表格图片,按照表格进行分割,并识别分割后的子图片中的文字,希望对需要的小伙伴一些些帮助。具体的实现见如下代码。 # -*- coding: utf-8 -*- """ Created on Tue May 28 19:...
  • Bootstrap3 带边框的表格样式

    千次阅读 2019-05-05 15:28:03
    带边框的表格 为 <table> 添加 .table-bordered 类,就可以为表格中所有的单元格添加边框,同时也为整个表格添加边框。如: <tableclass="table table-bordered"> <thead> <tr> &...
  • 好用漂亮的Android 表格框架

    万次阅读 多人点赞 2018-01-11 13:54:24
    Android 表格使用的频率并不高,之前花了心思写了SmartTable表格,觉得android移动端表格就应该是这个样子的,地址https://github.com/huangyanbin/smartTable,一直放在github上无人问津,最近同学说蛮好用的,为...
  • 表格的边距 边框设置

    千次阅读 2013-07-30 11:03:32
    cellspancing属性用来添加表格单元格之间的间距(以像素为单位或表格宽度百分比); cellpadding属性用来添加表格单元格内数据填充间距(以像素为单位或表格宽度百分比); frame与rules fram属性显示指定的表格...
  • antd表格去掉四周边框

    千次阅读 2019-06-12 14:56:00
    只涉及到css的一些基本选择 .ant-table-bordered .ant-table-header > table, .ant-table-bordered .ant-table-body > table, .ant-table-bordered .ant-table-fixed-left table, .ant-table-bordered .ant...
  • Bootstrap之表格自定义checkbox复选全选
  • 三、表格 1.表格基本语法:  内容   2.表格的对齐方式: 属性 值 说明 align (水平对齐方式) left 左对齐 center 居中对齐 right 右...
  • 表格如何去除边框以及分割线

    千次阅读 2017-04-25 16:31:21
    表格单元格分隔线的显示与隐藏的诀窍在于rules,标签中rules。 它三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这样我们就只能看到表格的行;当rules=rows时,则 隐藏了横向的分隔
  • element-UI 的table表格数据提供多项的功能,只要在表格列中多加一列就可以选择表格的数据 但是时候表格的数据是分页的,分页一般是要重新请求后台数据,这样上一页也就是上一次请求的数据的选中状态就没有了....
  • element表格表头下边框不显示问题

    千次阅读 2020-04-10 03:17:16
    element表格表头下边框不显示问题 解决方法:找到th,把边框设置成0.5px就可以了
  • 编辑器里面可以看到表格有边框,在前台页面展示出来的却没有边框。 修改办法: 打开ueditor.all.js 1、找到下面的代码,修改 utils.each(tables, function (table) { removeStyleSize(table, true); domUtils....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 248,884
精华内容 99,553
关键字:

怎么让表格有框