默认的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. Ubuntu下通过Wine安装LTSpice 17.1.8

    LTSpice LTSpice 是常用的电路模拟软件, 但是只有 Windows 版本和 Mac 版本, 在 Linux 下需要用 Wine 运行. 以下说明如何在 Ubuntu 下安装最新的 LTS ...

  2. thinkphp集成editormd一系列实战

    介绍 最近php搞了个博客,需要集成markdown编辑器(富文本的太low了,效率也低),用的是时下比较火的editormd,除了基本的文档编辑我这里还实现了几个自己的需求: 使用ctrl-v实现将 ...

  3. webrtc 的理解

    常规视频的传输包括以下几个步骤:采集,编码,推流,转码,分发,拉流,解码和渲染 在一个实时的音视频系统架构里,上面的每个环节都会有一定程度的优化空间. 以下内容摘自:rtmp直播和webrtc直播对比 ...

  4. Java JVM——7.本地方法栈

    本地方法栈 Java虚拟机栈于管理Java方法的调用,而本地方法栈用于管理本地方法的调用. 本地方法栈,也是线程私有的. 允许被实现成固定或者是可动态扩展的内存大小.(在内存溢出方面是相同的) ✎ 如 ...

  5. 【webserver 前置知识 01】Linux系统编程入门

    题外话,PA里面也有很不错的Linux基础基础 传送门:https://nju-projectn.github.io/ics-pa-gitbook/ics2019/linux.html 静态库与动态库 ...

  6. Jenkins配置SpringBoot项目启动脚本

    目录 背景 脚本编写 变量说明 使用说明 Q&A jenkins部署时错误 背景 上一篇Jenkins配置介绍了Jenkins远程部署的相关配置和步骤,但是最后的部署脚本只适用于部署原始tom ...

  7. 【Azure Cloud Services】云服务频繁发生服务器崩溃的排查方案

    问题描述 云服务(Cloud Services)在使用期间,频繁发生崩溃事件,在崩溃期间,查看CPU负载为100%,而且同时伴随以下情况: 部署在云服务上的应用无法访问 远程连接云服务实例(RDP)访 ...

  8. [C++] 进程注入dll版

    目录 前言 前提 原理 代码 一些问题 前言 这几天在弄进程注入的事情,一直做不出来直接的进程注入,也就是不要dll的注入.因为dll注入据说容易触发杀软,但是弄了两天没弄出来.代码明明不报错,目标进 ...

  9. 结构化思维助力Prompt创作：专业化技术讲解和实践案例

    结构化思维助力Prompt创作:专业化技术讲解和实践案例 最早接触 Prompt engineering 时, 学到的 Prompt 技巧都是: 你是一个 XX 角色- 你是一个有着 X 年经验的 X ...

  10. [.Net]使用Soa库+Abp搭建微服务项目框架（三）：项目改造

    ​上一章我们说道,如果要使各模块之间解耦,使得各自独立成服务,首先要解除各个模块之间的引用关系. 还记得上一章我们的小项目吗 ?们回到之前的代码上来,当前的项目架构如下图: ​ 这次的任务是将它改造成 ...