默认的TABLE边线设置即使是1px 是很粗的，会使用其他一些方法来制作出细线边框。

利用CSS来实现细线的方法，很有效，而且兼容所有浏览器。

细线表格如果单纯设置边框，很难保证浏览器兼容。常见的做法是利用 CSS2 的 "border-collapse:collapse;" 属性合并表格边框；并对 table 元素设置左边框和上边框，对 th 和 td 元素设置右边框和下边框。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style type="text/css">

        table

        {

            border-collapse: collapse;

            border-spacing: 0;

            border-left: 1px solid #888;

            border-top: 1px solid #888;

            background: #efefef;

        }

        th, td

        {

            border-right: 1px solid #888;

            border-bottom: 1px solid #888;

            padding: 5px 15px;

        }

        th

        {

            font-weight: bold;

            background: #ccc;

        }

    </style>

</head>

<body>

    <table>

        <tr>

            <th>

                table head (row1, col1)

            </th>

            <th>

                table head (row1, col2)

            </th>

            <th>

                table head (row1, col3)

            </th>

        </tr>

        <tr>

            <td>

                table data (row1, col1)

            </td>

            <td>

                table data (row1, col2)

            </td>

            <td>

                table data (row1, col3)

            </td>

        </tr>

        <tr>

            <td>

                table data (row2, col1)

            </td>

            <td>

                table data (row2, col2)

            </td>

            <td>

                table data (row2, col3)

            </td>

        </tr>

    </table>

</body>

</html>

table边框改为细线的更多相关文章

  1. HTML小技巧将table边框改为细线

    HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线,因为默认的TABLE边线设置即使是1px 是很粗的.因此会使用其他一些方法来制作出细线边框,这里介绍一种利用CSS来实现细线的方法,很有效 ...

  2. 借助JavaScript中的时间函数改变Html中Table边框的颜色

    借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...

  3. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  4. table边框不显示

    今日在做报表的时候发现,最后一行隐藏后整个报表的下边框会不显示,猜测是td的边框隐藏后但table并未设置边框,导致下边框没有出现.因此设置了table边框后问题解决.table和td的边框关系如下实 ...

  5. table边框设置

    一.表格的常用属性基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔). cellpadding(表格内元素的间隔 ...

  6. 解决table边框在打印中不显示的问题

    先了解一下,table边框如何设置 一.只对表格table标签设置边框 只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式.CSS代码: .t ...

  7. table 边框问题

    对table设置css样式边框,分为几种情况:1.只对table设置边框2.对td设置边框3.对table和td技巧性设置表格边框4.对table和td设置背景,实现完美表格边框 以下DIVCSS5对 ...

  8. table边框1px

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 关于table边框，设置了border-collapse:collapse之后，设置border-radius没效果

    做项目遇到边框需要设置圆角,然后发现在设置了border-collapse:collapse之后,border-radius:10px不起作用了,发现这个是css本身的问题,两者不能混在一起使用. 代 ...

  10. html中table边框属性

    1.向右(横向)合并: <td colspan="5"><span>后台管理系统</span></td> 2.向下(纵向)合并: & ...

随机推荐

  1. Linux线程 | 创建 终止 回收 分离

    一.线程简介 线程是参与系统调度的最小单位.它被包含在进程之中,是进程中的实际运行单位. 一个进程中可以创建多个线程,多个线程实现并发运行,每个线程执行不同的任务. 每个线程都有其对应的标识,称为线程 ...

  2. 【Unity3D】阴影原理及应用

    1 阴影原理 ​ 光源照射到不透明物体上,会向该物体的后面投射阴影,如果阴影区域存在其他物体,这些物体不被光源照射的部分就需要渲染阴影.因此,我们可以将阴影的生成抽象出 2 个流程:物体投射阴影.物体 ...

  3. 竞态问题与RxJs

    竞态问题与RxJs 竞态问题通常指的是在多线程的编程中,输入了相同的条件,但是会输出不确定的结果的情况.虽然Js是单线程语言,但由于引入了异步编程,所以也会存在竞态的问题,而使用RxJs通常就可以解决 ...

  4. Swoole从入门到入土(15)——WebSocket服务器[初步接触]

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.换句话说,Websocket让web可以与服务端实现长连接. 在Swoole中,通过内置的 WebSock ...

  5. Swoole从入门到入土(9)——TCP服务器[协程风格]

    上一篇,我们一起初步接触了协程.我相信只有一节的讨论,很多小伙伴对于"协程"与"线程"的区分可能还有点模糊.我们这里以两者的比较作为本篇开头,进行一番比较. 首 ...

  6. Golang微服务框架go-kratos分析：框架架构分析

    一.kratos设计理念 这里主要讲解 kratos v2 的设计理念. kratos 框架制定接口规范,然后通过插件来实现具体需求,实现自由定制.可插拔的微服务框架. 我们既可以选择 kratos ...

  7. kubebuilder

    https://book.kubebuilder.io/quick-start crd+operator 定义了CRD之后,下一步就是需要一个像Deployment Controller Manage ...

  8. RHEL8重置root用户密码步骤

    要先确定是否为RHEL 8系统. [root@zhangsan ~]# cat /etc/redhat-release Red Hat Enterprise Linux release 8.0 (Oo ...

  9. 可视化探索开源项目的 contributor 关系

    引语:作为国内外最大的代码托管平台,根据最新的 GitHub 数据,它拥有超 372,000,000 个仓库,其中有 28,000,000 是公开仓.分布式图数据库 NebulaGraph 便是其中之 ...

  10. 有了 ETL 数据神器 dbt，表数据秒变 NebulaGraph 中的图数据

    本文搭配同主题分享视频阅读更佳,<多数据源的数据治理实践> 如果你装好某款数据库产品,比如:分布式图数据库 NebulaGrpah,跃跃欲试的第一步是不是就让它干活搞数据呢?好的,现在问题 ...