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就行了,用法很简单

  • 相关阅读:
    网站的内容安全策略(CSP)
    javascript学习日记--eval、prompt
    【java每日一学】Applet类详解
    JavaScript 闭包应用-打印所有li元素的内容
    JavaScript 闭包应用-计算打车价格
    JavaScript 闭包应用-点击li输出索引号
    JavaScript jQuery 任务清单 ToDoList
    JavaScript 面向对象TAB栏切换
    JavaScript 常见移动端网页特效
    JavaScript 移动端轮播图
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/3625458.html
Copyright © 2011-2022 走看看