带边框的单个 td CSS

Question

table {
        border-collapse: collapse;
        margin:100px auto;
    }
    
 td {
        margin: 0px;
        padding: 5px;
        text-align: left;
        border:1px solid #080808;
    }
    
.border {
        border: 1px solid #080808;
    }

    
.noborders td {
        border:0;
    }

      
.border_single {

        border: 1px solid #080808;
    }

<table>
    <tbody class="border">
        <tr>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td class="border_single">Table WITH border</td>
            <td>Table Cell without borders</td>
        </tr>
    </tbody>
</table>

我正在尝试了解 CSS 如何在 table 层次结构中传递值。我特意将 td 归类为 "border_single"，以便专门引用它并应用基本边框。我无法显示边框，我假设它继承了高层的样式，这就是为什么不显示特定 td 的边框？

Answer 1

你的工作是正确的，你只需要在你的 class

中添加 td

.border_single 
{
   border: 1px solid #080808;
}

至此

td.border_single 
{
   border: 1px solid #080808;
}

即使您有 td.no_borders、td.with_background 等，td.border_single 仍会按指定的方式工作，您也可以使用 id #border_single 或 td#border_single 更具体地说。

您还可以使用 td:nth-child(n)、td:first-child、td:last-child 并获得相同的输出，而无需使用 id 或 class

table {
        border-collapse: collapse;
        margin:100px auto;
    }
    
 td {
        margin: 0px;
        padding: 5px;
        text-align: left;
        border:1px solid #080808;
    }
    
.border {
        border: 1px solid #080808;
    }

    
.noborders td {
        border:0;
    }

      
td.border_single {

        border: 1px solid #080808;
    }
    
tr:nth-child(5) > td:nth-child(2)
    {
    border: 1px solid #080808;
    }
tr:last-child > td:nth-child(2)
    {
    border: 1px solid #080808;
    }

<table>
    <tbody class="border">
        <tr>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td class="border_single">Table WITH border</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>With border using tr:nth-child(n) > td:nth-child(n)</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>With border using tr:last-child > td:nth-child(n)</td>
            <td>Table Cell without borders</td>
        </tr>
    </tbody>
</table>

Answer 2

问题

CSS 声明中的具体性很重要。

选择者获胜的顺序为：

重要性（通过使用 !important）
特异性
源顺序

阅读更多here.

.no_borders td 比 .border_single 更具体，所以在：

    <tr class="noborders">
        <td>Table Cell without borders</td>
        <td class="border_single">Table WITH border</td>
        <td>Table Cell without borders</td>
    </tr>

<td class="border_single">Table WITH border</td> 将从 .no_borders td 中选取样式而不是 .border_single。

解决方案

一个可能的解决方案是使用 id 而不是 class 选择器，因为 id 比 class.

更具体

在这种情况下，请在 HTML 文件中使用 <td id="border_single">，并将 CSS 文件中的 .border_single 更改为 #border_single。您可以运行下面的代码片段来了解它是如何工作的。

table {
        border-collapse: collapse;
        margin:100px auto;
    }
    
 td {
        margin: 0px;
        padding: 5px;
        text-align: left;
        border:1px solid #080808;
    }

.border {
        border: 1px solid #080808;
    }

.noborders td {
        border:0;
    }
      
#border_single {
        border: 1px solid #080808;
    }

<table>
    <tbody class="border">
        <tr>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td id="border_single">Table WITH border</td>
            <td>Table Cell without borders</td>
        </tr>
    </tbody>
</table>

希望对您有所帮助！

带边框的单个 td CSS

Single td with border CSS

css

html-table

border

问题

解决方案