2

我的标题中有以下 CSS：

    <style type="text/css">
    table, td
    {
        border-color: #600;
        border-style: solid;
    }

    table
    {
        border-width: 0 0 1px 1px;
        border-spacing: 0;
        border-collapse: collapse;
    }

    td
    {
        margin: 0;
        padding: 4px;
        border-width: 1px 1px 0 0;
        background-color: #FFC;
    }
</style>

以及我的页面正文中的下表：

<table>
    <tr>
        <th style="width: 100px;">column</th><th style="width: 180px;">column</th><th style="width: 100px;">column</th><th style="width: 100px;">column</th>
        <th style="width: 180px;">column</th><th style="width: 180px;">column</th> <th>column</th>
    </tr>
    <tr>
        <td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td><a href="">text</a></td>
    </tr>
</table>

结果如下：

在此处输入图像描述

看看第一列标题上的左边框如何？什么会导致这种情况，我怎样才能让它消失？

谢谢！

4

3 回答 3

3

将此添加到您的CSS：

tr{border-left:1px solid #000;}
tr:first-child{border-left:none;}

否则你将不会得到左边的边框

检查这个小提琴：http: //jsfiddle.net/surendraVsingh/KNNeZ/

于 2012-06-23T19:06:07.107 回答
1

请更新你的table风格

 table
    {
        border-width: 0 0 1px 0px;
        border-spacing: 0;
        border-collapse: collapse;
    }

还要为 TD 标签添加左边框，以便在 td 上而不是在 th 上存在左顺序。

td
    {
        margin: 0;
        padding: 4px;
        border-width: 1px 1px 0 1px;
        background-color: #FFC;
    }​

试试这个小提琴

于 2012-06-23T18:58:02.467 回答
1

演示：为清楚起见， 我添加了边界更正，您可以稍后将其删除margin:20px;table

于 2012-06-23T19:04:50.517 回答