DEMO DETAILS

Question

我想在td上设置边框宽度。但我不知道为什么宽度不在桌面之外？这是我的问题的演示：http://jsfiddle.net/GreatFusion/humg4/2/
我只是想让内表部分变成蓝色。但是，表格的外侧也是蓝色，这很困惑吗？这是html代码：

<table border="1">
    <tr>
        <td style="border-left:10px solid blue">Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
     <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
     <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
</table>

这是CSS代码：

table {
  border:1px solid #000;
  border-collapse: collapse;
  border-spacing: 0; 
}
tr {border-top:1px solid #000;}
tr + tr {border-top:1px solid red;}
td {border-left:1px solid #000;}
td + td {border-left:1px solid red;}

Answer 1

您已在css

中为td设置了保证金

td {
    border-left:1px solid #000;
}

当你再次将它设置为10px时，它就会消失;

您可以在其中添加 div或span ，使其像

一样工作

<强> Fiddle

<table border="1">
    <tr>
        <td><span style="border-left:10px solid blue"><span>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
     <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
     <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
</table>

或直接在CSS中更改

td {
        border-left:10px solid blue;
    }

或者你可以简单地做

table {
    border:1px solid #000;
    border-collapse: separate;
    border-spacing: 0;
}

而不是

 table {
        border:1px solid #000;
        border-collapse: collapse;
        border-spacing: 0;
    }

Answer 2

尝试border-collapse: separate;而不是border-collapse: collapse;

Answer 3

使用：

border-collapse: separate;

而不是

border-collapse: collapse;

DEMO DETAILS

Answer 4

当您向表格/单元格/行添加边框时，这是预期的行为。

如果我理解正确，你需要一个位于单元格内部的垂直线，位于文本的左侧。如果是这种情况，您可以使用以下内容为内容添加边框：

padding-left: 5px;
border-left: 10px;

或者您可以在td

中添加宽度为10px且蓝色背景的span元素

表格内容超出表格td的边界

4 个答案:

DEMO DETAILS