• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  文章导航

                  CSS border-collapse 细线边框

                  2018-8-1 11:20| 作者: admin| 查看: 1729| 评论: 0|来自: 蚂蚁部落

                  默认状态下table边框比较粗一点,是非常丑陋的粗(粗是由于相邻单元格边框未合并导致的视觉效果)。

                  实现表格细线边框效果的方式有多种,CSS也提供了专门的属性。

                  border-collapse属性可以完美实现标题中的需求。

                  语法结构如下:

                  [CSS] 纯文本查看 ?#31895;?#20195;码
                  border-collapse:separate | collapse

                  参数解析:

                  (1).separate:默认值,规定单元格边框不合并。

                  (2).collapse:规定单元格边框合并。

                  代码实例如下:

                  [HTML] 纯文本查看 ?#31895;?#20195;码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title> 
                  <style> 
                  table, td { 
                    border:1px solid green; 
                  }
                  </style> 
                  </head>
                  <body>
                  <table>
                    <tr>
                      <td>编号</td>
                      <td>年龄</td>
                      <td>性别</td>
                    </tr>
                    <tr>
                      <td>1</td>
                      <td>20</td>
                      <td>男</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>21</td>
                      <td>女</td>
                    </tr>
                  </table>
                  </body>
                  </html>

                  默认情况下,边框没有合并,每一个单元格都有独立完整的边框,比较丑陋。

                  在文章开头说错的"粗",基本就是由于边框没有合并导致的视觉效果。

                  再来看一段实例:

                  [HTML] 纯文本查看 ?#31895;?#20195;码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title> 
                  <style type="text/css"> 
                  table, td { 
                    border:1px solid green; 
                  }
                  .collapse {
                    border-collapse:collapse; 
                  }
                  </style> 
                  </head>
                  <body>
                  <table class="collapse">
                    <tr>
                      <td>编号</td>
                      <td>年龄</td>
                      <td>性别</td>
                    </tr>
                    <tr>
                      <td>1</td>
                      <td>20</td>
                      <td>男</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>21</td>
                      <td>女</td>
                    </tr>
                  </table>
                  </body>
                  </html>

                  上面的代码将边框进行了合并,是不是更加符合实际应用需求,?#27604;换?#26377;进一步美化的空间。

                  1

                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  刚表态过的朋友 (1 人)

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            山东十一选五智能选号 彩票图表走势图 华东15选5复式价格表 查足球比分软件 扑克牌手法 五十七期一尾中特平 腾讯分分彩龙虎计划 香港六合彩特码资料 福建31选7复式中7十1 安全真人真钱棋牌 彩票软件工具 辽宁快乐12带跨度 快三跨度计算公式 河南11选5奖金多少 河北十一选五电子走势图