zoukankan      html  css  js  c++  java
  • 用CSS改变表格边框样式

    zt: http://hi.baidu.com/lalajieer/item/d451f8c32e680c5aac00ef73

    css定义:

    <td style="border-bottom-style: none; border-bottom- medium" height="25">隐藏下边</td>
    <td height="25" style="border-top-style: none; border-top- medium">隐藏上边框</td>
    <td style="border-left-style: none; border-left- medium" height="25">隐藏左边框</td>
    <td style="border-right-style: none; border-right- medium" height="25">隐藏右边框</td>

    1.表格的分隔线可以隐藏
    <table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线

    <table border rules=rows cellspacing=0 align=right>可以隐藏纵向的分隔线

    <table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线


    2.表格的边框不断在闪

    以下方法可以令表格的边框不断在闪,很实用的
    在BODY区加上

    <table border="0" width="280" id="myexample"
    style="border:5px solid yellow">

    <tr>

    <td>加入任意的物件.加入任意的物件.

    <br>加入任意的物件.加入任意的物件.

    <br>加入任意的物件.加入任意的物件.</td>

    </tr>

    </table>

    <script language="JavaScript1.2">

    <!--

    function fla****(){

    if (!document.all)

    return

    if (myexample.style.borderColor=="yellow")

    myexample.style.borderColor="lime"

    else

    myexample.style.borderColor="yellow"

    }

    setInterval("fla****()", 500)

    //-->

    </script>


    3.表格分行下载

    这个对表哥内容很大比较实用

    在需要分行下载处加上 <tbody >

    比如:
    <table >
    <tbody >
    <tr >
    <td >flsdjfsdjfkdsjf</td >
    </tr >
    <tr >
    <td >skdjfsdjfksd</td >
    </tr >
    </tbody >

    <tbody >
    <tr >
    <td >flsdjfsdjfkdsjf</td >
    </tr >
    <tr >
    <td>skdjfsdjfksd</td >
    </tr >
    </tbody >
    </table >

    4.几种样式不同的表格

    <table border="1" width="220" style="position: absolute; left:
    11; top: 11" height="26" >

    <tr>

    <td width="100%">普通表格</td>

    </tr>

    </table>

    5.正立方表格

    <table border="1" width="220" bordercolorlight="#eeeeee"
    bordercolordark="#000000" style="position: absolute; left: 10; top:
    49" height="26">

    <tr>

    <td width="100%">正立方表格</td>

    </tr>

    </table>


    6.细表格

    <table border="0" frame=vsides width="219"
    bgcolor="#000000" cellspacing="1" cellpadding="0"
    height="22" style="position: absolute; left: 11; top: 86">

    <tr bgcolor="#FFFFFF">

    <td width="100%" height="2">细表格</td>

    </tr>

    </table>

    7.立体表格

    <table border="1" width="220" bordercolorlight="#ffffff"
    bordercolordark="#ffffff" style="position: absolute; left: 10; top:
    112" height="34">

    <tr>

    <td width="100%" bgcolor="#B7B7B7"
    bordercolorlight="#000000" bordercolordark="#eeeeee" >立体表格</td>

    </tr>

    </table>


    8.无名表格

    <table width="220" align="center" style="position: absolute;
    left: 246; top: 12" height="51">

    <tr>

    <td><fieldset style="220" align="center">
    <legend> 无名表格 </legend>  <p align="right"> </fieldset>
    <br>

    </td>

    </tr>

    </table>

    9.表中表效果Ⅱ

    <table width="220" align="center" style="position:
    absolute; left: 245; top: 89" height="110">
    <tr>
    <td height="75"><fieldset style="220"
    align="center"> <legend> 表中表效果Ⅱ </legend> <table
    frame="hsides" border="1"
    bordercolorlight="#000000" bordercolordark="#ffffff"
    width="100%" cellspacing="1" cellpadding="0" height="78">
    <tr bgcolor="#ffffff">
    <td width="100%" height="76"></fieldset></td>
    </tr>
    </table>

    10.表中表效果Ⅰ

    <table width="220" align="center" style="position: absolute;
    left: 10; top: 120" height="138" cellspacing="1"
    cellpadding="0">

    <tr>

    <td height="126"><fieldset style=" 220; color: #B7B7B7;
    border-style: groove" align="center"> <legend style="color:
    #FFFFFF; border: 1 solid #808080" > <font color="#000000">表中表效果Ⅰ</font>
    </legend>  <p align="right"> </fieldset>

    </td>

    </tr>

    </table>


    11.表格中边框的显示


    只显示上边框 <table frame=above>
    只显示下边框 <table frame=below>
    只显示左、右边框 <table frame=vsides>
    只显示上、下边框 <table frame=hsides>
    只显示左边框 <table frame=lhs>
    只显示右边框 <table frame=rhs>
    不显示任何边框 <table frame=void>


    style="BORDER-LEFT: #cccccc 1px solid;BORDER-right: #cccccc 1px solid"

  • 相关阅读:
    【基础算法】- 全排列
    【基础算法】- 2分查找
    区块链培训
    Static Binding (Early Binding) vs Dynamic Binding (Late Binding)
    test
    No data is deployed on the contract address!
    "throw" is deprecated in favour of "revert()", "require()" and "assert()".
    Variable is declared as a storage pointer. Use an explicit "storage" keyword to silence this warning.
    京都行
    Failed to write genesis block: database already contains an incompatible
  • 原文地址:https://www.cnblogs.com/rattersnake/p/2663469.html
Copyright © 2011-2022 走看看