table标签中设置tr的行间距

一时失言乱红尘 2022-06-05 12:37 373阅读 0赞

# [table中设置tr行间距][table_tr] #

CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框

<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; border:1px solid silver; word-break:break-word"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 值</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 描述</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> separate</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> collapse</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> inherit</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 规定应该从父元素继承 border-collapse 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

border-collapse属性加上border-spacing属性就可以设置tr行间距

![复制代码][copycode.gif]

<table style="border-collapse:separate; border-spacing:0px 10px;">
        <tr>
         <td>那片笑声躺我想起我的那些花儿</td>
        </tr>
        <tr>
         <td>在我生命每个角落静静为我开着</td>
        </tr>
     </table>

![复制代码][copycode.gif]

[table_tr]: http://www.cnblogs.com/whoiszoe/p/5945917.html
[copycode.gif]: /images/20220605/af04790165b94e488bc143d6652643f8.png