默认的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. MindSponge分子动力学模拟——定义Collective Variables

    技术背景 在前面的几篇博客中,我们介绍了MindSponge分子动力学模拟框架的基本安装和使用和MindSponge执行分子动力学模拟任务的方法.这里我们介绍一个在增强采样领域非常常用的工具:Coll ...

  2. Python list 中删除元素的方法

    在python列表中删除元素主要分为以下3种场景: 根据目标元素所在的索引位置进行删除,可以使用del关键字或pop()方法:根据元素本身的值进行删除,可使用列表(list类型)提供的remove() ...

  3. jq 完成复选框的全选和全不选，并组装成数组发送到后台

    jQuery 代码实现,HTML dom节点对应js的id 即可 <script> $(function() { //复选框全选和全不选 $("#selectAll") ...

  4. U盘安装win7提示缺少所需的CD/DVD驱动器设备驱动程序

    问题: 最近使用U盘启动盘安装win7,系统弹出提示框: 解决方法: U盘别插在usb3.0的口(蓝色),换成一个usb2.0的口就可以了

  5. 多线程系列(八) -ReentrantLock基本用法介绍

    一.简介 在之前的线程系列文章中,我们介绍到了使用synchronized关键字可以实现线程同步安全的效果,以及采用wait().notify()和notifyAll()方法,可以实现多个线程之间的通 ...

  6. 循环掌控：深入理解C语言循环结构，高效实现重复性任务

    欢迎大家来到贝蒂大讲堂 养成好习惯,先赞后看哦~ 所属专栏:C语言学习 贝蒂的主页:Betty's blog 引言 前面贝蒂带大家了解了选择结构,今天就来为大家介绍循环结构,也就是我们熟悉的while ...

  7. [Android 逆向]绕过小米需插卡安装apk限制

    1. 确保自己手机是root的了 2. 给手机安装busybox,使可以用vi编辑文件 安装方法: 0. adb shell getprop ro.product.cpu.abi 获得 cpu架构信息 ...

  8. [Android 逆向]Xposed 破解 切水果大战原版.apk

    代码 public class Main implements IXposedHookLoadPackage { boolean flag = false; @Override public void ...

  9. 项目实战：Qt+OSG三维2D文字实时效果查看工具

    需求   OSG三维中2D文字的基本属性较多,方便实时查看效果,并出对应文本代码.   Demo      工具下载地址   CSDN免积分下载地址:https://download.csdn.net ...

  10. 【认知服务 Azure Cognitive Service】使用Azure Search中Create an Demo的示例时，出现空白页面的问题

    问题描述 在根据Azure 认知服务的Search功能文档创建示例时(快速入门:在门户中创建演示应用(Azure 认知搜索)).完全相同的步骤,在中国区创建后下载Demo,查询结果一片空白:如下: 而 ...