zoukankan      html  css  js  c++  java
  • 表格无边框,有内框,在table嵌套时,防止出现重复边线

    <html>
    <head>
    <title>test 表格无边框,有内框! ^^ CSDN 学习积累</title>
    <style type="text/css">
    #table {border:none;width:100%;}
    #table td {border-bottom:1px solid #000;border-right:1px solid #000;}
    #table td.two {border-right:none;}
    #table td.thr {border-bottom:none;}
    </style>
    </head>
    <body>
    <table id="table" cellpadding="0" cellspacing="0">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="two">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="two">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="two">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="two">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="two">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="two">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="two">&nbsp;</td>
      </tr>
      <tr>
        <td class="thr">&nbsp;</td>
        <td class="thr">&nbsp;</td>
        <td class="thr">&nbsp;</td>
        <td class="thr">&nbsp;</td>
        <td class="thr">&nbsp;</td>
        <td class="thr">&nbsp;</td>
        <td class="thr">&nbsp;</td>
        <td class="two thr">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>

    只要在每一行的最后一列加一个two,再在最后一行的所有列加上thr就行了,用法很简单

  • 相关阅读:
    读《阿里云是如何失控的》有感
    LeetCode Search in Rotated Sorted Array 在旋转了的数组中查找
    界面编程模仿篇(QQ登录界面逼真篇)
    最牛B的编码套路
    QinQ封装及终结详解
    seaJs学习笔记之javascript的依赖问题
    Deploy maven on Linux OS
    c++——inline内联函数
    c++——引用
    c++——const关键字
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/3625458.html
Copyright © 2011-2022 走看看