问答详情
源自:12-9 画个圈圈 - 使用border为盒子添加边框(一)

背景表格,用CSS怎么可以变成细边框表格,求大神指教

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>



 </head>

 <body>

 <table border="1" cellpadding="10">

  <tr>

<td rowspan="5">表格</td>

<td rowspan="3">表格</td>

<td rowspan="2">表格</td>

<th colspan="3">表格</th>

    <td>表格</td>

  </tr>

  <tr>

<td rowspan="2">表格</td>

<th colspan="2">表格</th>



<td>表格</td>



  </tr>

  <tr>

<td>表格</td>

<th colspan="2">表格</th>


<td>表格</td>




  </tr>

  <tr>

<td>表格</td>

<td>表格</td>

<td>表格</td>

<td>表格</td>


<th colspan="2">表格</th>

  </tr>

   <tr>

<td>表格</td>

<td>表格</td>

<td>表格</td>

<td>表格</td>

<th rowspan="2">表格</th>

<th rowspan="2">表格</th>

  </tr>

   <tr>

<td>表格</td>

<td>表格</td>

<td>表格</td>

<td>表格</td>

<td>表格</td>

  </tr>

   <tr>

<td>表格</td>

<td>表格</td>

<td>表格</td>

<td>表格</td>

<td>表格</td>

<td>表格</td>

<td>表格</td>


  </tr>

  </table>

 </body>

</html>


提问者:慕粉4237190 2016-10-27 15:55

个回答

  • 提拉米苏HR
    2017-05-26 22:40:33

    </style><style type="text/css"> 

     table 

    border-collapse: collapse; 

    }

    </style> 

    加上这个就好

    border-collapse : separate(默认) | collapse | inherit

    separate : 边框独立

    效果图:

    collapse : 相邻边被合并

    效果图:

    inherit:规定应当从父元素持续 border-collapse 属性的值。


  • 慕粉4237190
    2016-10-27 15:56:03

    <style type="text/css"> 

    table 

    border-collapse: collapse; 

    border: none; 

    width: 200px; 

    td 

    border: solid #000 1px; 

    </style>