给HTML表格行一个边框，< tr> [英] Giving a border to an HTML table row, <tr>

问题描述

可以一次性将表格行，< tr> 边框化，而不是为单个单元格提供边框，< td> ; like，

 < table cellpadding =0cellspacing =0width =100％ style =border：1px; rules =none> < tbody> < tr> < th style =width：96px;>栏1< / th> < th style =width：96px;>栏2< / th> < th style =width：96px;>栏3< / th> < / tr> < tr> < td>& nbsp;< / td> < td>& nbsp;< / td> < td>& nbsp;< / td> < / tr> < tr> < td style =border-left：thin solid; border-top：thin solid; border-bottom：thin solid;& nbsp;< / td> < td style =border-top：thin solid; border-bottom：thin solid;& nbsp;< / td> < td style =border-top：thin solid; border-bottom：thin solid; border-right：thin solid;& nbsp;< / td> < / tr> < tr> < td>& nbsp;< / td> < td>& nbsp;< / td> < td>& nbsp;< / td> < / tr> < / tbody>< / table>  

在< tr> 周围的边框，但它需要在单个单元格周围的边框。

/ d73e7 />→ jsFiddle

解决方案

您可以设置 border tr 元素，但是根据CSS 2.1规范，这些属性在分离的边框模型中没有效果，这在浏览器中是默认的。参考：17.6.1 分隔边框模型。 （根据CSS 2.1， border-collapse 的初始值是单独浏览器也将其设置为 table 的默认值。无论如何，净效果是你几乎在所有浏览器上都有分离的边框，除非你明确指定 collapse 。）

因此，您需要使用折叠边框。示例：

 < style> 
 table {border-collapse：collapse; } 
 tr：nth-​​child（3）{border：solid thin; } 
< / style> 
  

Is it possible to border a table row, <tr> in one go instead of giving a border to individual cells, <td> like,

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

This gives a border around the given <tr> but it requires a border around individual cells.

Can we give a border to <tr> only in one go?

→ jsFiddle

解决方案

You can set border properties on a tr element, but according to the CSS 2.1 specification, such properties have no effect in the separated borders model, which tends to be the default in browsers. Ref.: 17.6.1 The separated borders model. (The initial value of border-collapse is separate according to CSS 2.1, and some browsers also set it as default value for table. The net effect anyway is that you get separated border on almost all browsers unless you explicitly specifi collapse.)

Thus, you need to use collapsing borders. Example:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

这篇关于给HTML表格行一个边框，< tr>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！