默认的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. 基于keras的双层LSTM网络和双向LSTM网络

    1 前言 基于keras的双层LSTM网络和双向LSTM网络中,都会用到 LSTM层,主要参数如下: LSTM(units,input_shape,return_sequences=False) un ...

  2. Java操作EasyExcel实现导入导出入门

    介绍 EasyExcel是阿里巴巴开源的一个excel处理框架,以使用简单.节省内存著称.EasyExcel能大大减少占用内存的主要原因是在解析Excel时没有将文件数据一次性全部加载到内存中,而是从 ...

  3. 解密prompt系列24. RLHF新方案之训练策略：SLiC-HF & DPO & RRHF & RSO

    去年我们梳理过OpenAI,Anthropic和DeepMind出品的经典RLHF论文.今年我们会针对经典RLHF算法存在的不稳定,成本高,效率低等问题讨论一些新的方案.不熟悉RLHF的同学建议先看这 ...

  4. vivo 短视频体验与成本优化实践

    作者:来自 vivo 互联网短视频研发团队 本文根据蔡创业.马运杰老师在"2023 vivo开发者大会"现场演讲内容整理而成. 在线点播场景,播放体验提升与成本优化是同等重要的两件 ...

  5. 麒麟系统开发笔记（六）：安装QtCreator开发IDE中的中文输入环境Fcitx输入法

    前言   中文输入法,QtCreator中无法输入中文也是ubuntu中一个常规问题,在麒麟系统中也此问题,要解决此问题,主要是安装和使用Fcitx输入法.  本文章最终结果是失败的,但是读者的系统未 ...

  6. DataGear 制作支持表单交互和多图表联动的数据可视化看板

    对于数据可视化,有时需要根据用户输入的查询条件展示限定范围的数据图表,DataGear的看板表单功能可以快速方便地实现此类需求. 下面的看板示例,包含一个柱状图.一个饼图和一个地图,用户可以通过看板表 ...

  7. 【Azure 应用服务】登录App Service 高级工具 Kudu站点的 Basic Auth 方式

    问题描述 从Azure App Service的页面中,直接跳转到高级管理工具Kudu站点(https://<your app service name>.scm.chinacloudsi ...

  8. Jepsen 测试框架在图数据库 Nebula Graph 中的实践

    在本篇文章中主要介绍图数据库 Nebula Graph 在 Jepsen 这块的实践. Jepsen 简介 Jepsen 是一款用于系统测试的开源软件库,致力于提高分布式数据库.队列.共识系统等的安全 ...

  9. mySQL清除数据表数据/删除表

    一.sql清空表数据的三种方式: 1.truncate – 删除所有数据,保留表结构,不能撤销还原,速度快 2.delete – 是逐行删除,不适合大量数据删除,速度极慢 3.drop – 删除表,表 ...

  10. win10图标异常显示空白，WiFi图标消失等情况解决方案

    出现WiFi图标异常不显示,但是网络却正常,以下为解决方案: Win + R 快捷键调出运行框,输入%USERPROFILE%\AppData\Local,找到IconCache.db文件并删除,之后 ...