HTML CSS 仅边框 <td>答案

【问题标题】：HTML CSS Only border <td>HTML CSS 仅边框 <td>
【发布时间】：2014-04-29 02:48:06
【问题描述】：

我希望只有一个带边框的单元格 (B2)。我不想在表格中使用表格。

<table border="0">
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td>B2</td>  <!-- Only this cell should have a border -->
        <td>C2</td>
    </tr>
    <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
    </tr>
</table>

【问题讨论】：

标签： html css html-table border

【解决方案1】：

您可以将 CSS 样式内联或应用到该元素，就像这样...

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td style="border: 1px solid black">B2</td>  <!-- Only this cell should have a border -->
        <td>C2</td>
    </tr>
    <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
    </tr>
</table>

Here's a Fiddle

【讨论】：

当我有 2 个带边框的 td 时，边框之间有一点空间。我试过边框间距：0px；但这没有用。怎样才能让两个边界相邻，边界是连续的？
将此添加到表格顶部 cellpadding="0" cellspacing="0"。答案已更新。

【解决方案2】：

HTML：

<td id="bordered">B2</td>

CSS：

#bordered {
border: 1px solid #000;
}

试试看。

【讨论】：

是的，刚刚注意到，然后修复它

【解决方案3】：

像这样？

JsFiddle

HTML：

<table border="0">
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td class='border-me'>B2</td>  <!-- Only this cell should have a border -->
        <td>C2</td>
    </tr>
    <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
    </tr>
</table>

CSS：

.border-me{
    border:2px solid red;
}

【讨论】：

你的@PeteSimmons 仍然有效！你有内联样式，我没有！
另外你得到了 +1 而我没有:( @PeteSimmons

【解决方案4】：

我建议：

tr:nth-child(2) td:nth-child(2) {
    border: 1px solid #000;
}

JS Fiddle demo.

或者，支持那些没有实现:nth-child()的浏览器：

tr:first-child + tr td:first-child + td {
    border: 1px solid #000;
}

JS Fiddle demo.

【讨论】：

是的，这就是解决方案，我曾经使用过 B2 但这没有用。但这是正确的解决方案！