各种CSS样式设置细线边框

基础知识回顾 : cellspacing:单元格与单元格之间的边距;cellpadding:单元格内的内容与单元格边沿的边距

简单实用的样式,设置所有的单元格为细线效果

<style type="text/css">
         #tab1{ border-collapse:collapse;}
         #tab1 td{ border:1px solid #000000;}
    </style>
<table width = "640px" id = "tab1">
            <tr>
                <td>
                    韦德
                </td>
                <td>
                    罗尔-邓
                </td>
            </tr>
            <tr>
                <td>
                    波什
                </td>
                <td>
                    雷-阿伦
                </td>
            </tr>
        </table>

style样式设置背景颜色重叠实现的细线效果

<style type="text/css">
        /*定义表格的背景颜色,也就是边框的颜色*/
        .table1{ background:black;}
        /*定义表格内单元格的背景为白色,细线出现*/
        .table1 td,.table1 th{ background:#ffffff}
    </style>
<table width = "80%" cellspacing = "1" border = "0" class = "table1">
            <tr>
                <td>
                    热火
                </td>
                <td>
                    火箭
                </td>
            </tr>
            <tr>
                <td>
                    热火
                </td>
                <td>
                    火箭
                </td>
            </tr>
        </table>
        <br />

<style type="text/css">

        #tab{ background-color:#000000;}
        #tab tr{ background-color:#ffffff}
         #tab td{ background-color:#ffffff}
    </style>
<table id = "tab" width = "640px" border="0" cellpadding="1" cellspacing="1">
            <tr>
                <td>
                    韦德
                </td>
                <td>
                    罗尔-邓
                </td>
            </tr>
            <tr>
                <td>
                    波什
                </td>
                <td>
                    雷-阿伦
                </td>
            </tr>
        </table>
        <br />

设置元素的style = "border-collapse:collapse;" bordercolor = "#000000"  cellpadding="0" cellspacing="0"

<table width = "640px" border="1" bordercolor = "#000000" cellpadding="0" cellspacing="0" style = "border-collapse:collapse;">
            <tr>
                <td>
                    韦德
                </td>
                <td>
                    罗尔-邓
                </td>
            </tr>
            <tr>
                <td>
                    波什
                </td>
                <td>
                    雷-阿伦
                </td>
            </tr>
        </table>
        <br />

只显示外层边框实线,内层实线不显示

<table width = "640px"cellpadding="0" cellspacing="0" style = " border:#000000 1px solid ;">
            <tr>
                <td>
                    韦德
                </td>
                <td>
                    罗尔-邓
                </td>
            </tr>
            <tr>
                <td>
                    波什
                </td>
                <td>
                    雷-阿伦
                </td>
            </tr>
        </table>
        <br />

时间: 2024-08-14 22:44:22

各种CSS样式设置细线边框的相关文章

HTML+CSS样式设置——CSS一学就会

HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有很大的关系.排版则主要依靠CSS来设置.调节. 下面说CSS与HTML的联合使用的过程: (1)新建CSS文件(一般放在与HTML文件同一路径下的css文件夹中) (2)在HTML的<head>标签中,用<link />对CSS进行引用 <link rel="stylesheet" type="text/css" 

博客园自定义CSS样式设置

关于博客园自定义CSS样式设置 关于博客园自定义CSS样式设置 首先,选择一个博客皮肤模板,如下 然后,F12审查元素,可对右侧的元素规则进行自定义更改,然后覆盖原CSS 譬如看看取消掉自定义背景图片是什么样子,同理也可以添加CSS样式代码 如此修改完后,就可在页面定制CSS代码框中填上你所需要修改的代码 下面是我的页面定制CSS代码: 1.html,body{2. color: #807C7C;3. font-family: "Helvetica Neue",Helvetica,Ar

每天一个JavaScript实例-展示设置和获取CSS样式设置

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-展示设置和获取CSS样式设置</title> <style> #date{ width:200px; background-color:l

css知识笔记(五)——css样式设置小技巧

水平居中设置-行内元素 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.如下代码: html代码: <body> <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示.</div> </body> css代码: <style> div.txtCenter{ text-align:center; } </style>

JavaScript的DOM_获取CSS样式设置元素大小

一.通过 style 内联获取元素的大小 style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); //获取元素 alert(box.style.width); //200px. 没有设置的话为空 alert(box.sty

从零开始学习html(十五)css样式设置小技巧——上

一.水平居中设置-行内元素 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>定宽块状元素水平居中</title> 6 <style> 7 div{ 8 border:1px solid red; 9 margin:20px; 10 } 11 .txtCenter{ 12 text-align:center; 13

CSS 0.5px 细线边框的原理和实现方式

细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即css中的1个像素对应物理屏幕中1个以上的像素点. 对于普通电脑,屏幕物理像素和css像素一一对应,显示的最小单位就是1px.而现在的手机,屏幕物理宽度一般都大于页面显示宽度.例如苹果6s的屏幕分辨率为1334x750像素,但是以375px的宽度显示页面,设备像素比就是750/375=2:此时在css中

从零开始学习html(十五)css样式设置小技巧——下

六.垂直居中-父元素高度确定的单行文本 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>垂直居中</title> 6 <style> 7 8 .wrap h2{ 9 margin:0; 10 height:100px; 11 12 background:#ccc; 13 } 14 </style> 1

CSS样式设置之垂直居中设置

2.垂直居中 我们在实际工作中也会遇到需要设置垂直居中的场景,比如好多报纸的文章标题在左右一侧时,常常会设置为垂直居中,为了用户体验性好. 这里我们又得分两种情况:父元素高度确定的单行文本,以及父元素高度确定的多行文本. 2.1 父元素高度确定的单行文本 第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢? 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和line-height高度一致来实现的.(height: 该元素的高度,line-height: 顾名思义,