默认的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. CentOS 7.3 源码安装squid 4.12 及安装过程遇到的一些问题

    一.源码安装squid 4.12 1.下载squid-4.12源码包 wget http://www.squid-cache.org/Versions/v4/squid-4.12.tar.gz tar ...

  2. 从 KeyStore 中获取 PublicKey 和 PrivateKey

    KeyStore(译:密钥存储库) 代表用于加密密钥和证书的存储设施. KeyStore 管理不同类型的 entry(译:条目).每种类型的 entry 都实现了 KeyStore.Entry 接口. ...

  3. 【OpenGL ES】纹理贴图

    1 前言 ​ 纹理贴图是指:将图片贴在模型的表面. ​ 纹理贴图的本质是:将图片划分为一系列三角形,使得图片顶点序列与模型顶点序列中的顶点一一对应,对于模型中任意三角形内部的坐标和图片中对应三角形内部 ...

  4. colrm命令

    colrm命令 colrm命令用于编辑源代码文件,脚本文件或常规文本文件中的文本,此命令从文件中删除选定的列,列定义为一行中的单个字符.索引总是从1开始,而不是0.如果同时指定了开始和结束,则它们之间 ...

  5. Ubuntu在无网络环境下，用离线源apt-get安装软件

    步骤概要如下: 1.假设目标安装的是服务器A,需先准备一台正常环境,且操作系统版本与A一致的服务器B: 2.用apt-get在服务器B上下载需要安装的包,并用dpkg-scanpackages依赖打包 ...

  6. win32-SetupDiSetClassInstallParamsW的使用

    SetupDiSetClassInstallParams函数一般是用来禁用/启用某个设备 比如我们可以禁用网络适配器 /* for Devpkey */ #define INITGUID /* dep ...

  7. 【Android 逆向】【攻防世界】easy-so

    1. apk安装到手机,随便输入点内容,提示错误 2. jadx打开apk btn.setOnClickListener(new View.OnClickListener() { // from cl ...

  8. 默认形参和关键字实参，收集参数，命名关键字参数，return自定义返回，全局变量和局部变量，函数名的使用---day10

    1.函数定义处(默认形参在函数的定义) 1.1.函数的调用处(关键字实参在函数的调用处) 2.收集参数 (1)收集参数: (1) 普通收集参数 在参数的前面加一个*,代表的是普通收集参数 作用:收集多 ...

  9. 【.Net Core】.Net Core 源码分析与深入理解 - 入口 Program.cs （一）

    研究原因:学习 .Net Core 两年有余,实际项目也使用了一年半,自己的技术已经到了瓶颈,需要有一个突破,我觉得首先研究架构师的设计思想,其次分析一下.Net Core的源码,这将会是一个很好的学 ...

  10. 【Azure Redis 缓存】Lettuce 连接到Azure Redis服务，出现15分钟Timeout问题

    问题描述 在Java应用中,使用 Lettuce 作为客户端SDK与Azure Redis 服务连接,当遇见连接断开后,长达15分钟才会重连.导致应用在长达15分的时间,持续报错Timeout 问题解 ...