如何删除此表上的双边框？

Question

我正在研究HTML和CSS，我得到的结果并不完美：

我在这里创造了一个小提琴：http://jsfiddle.net/niklasro/GParb/

但桌子的边框似乎与所需屏幕截图的边框不匹配。如何使布局看起来更像原始模型并删除表格上的双边框？

以下是我对该表的CSS和HTML代码：

CSS

table{ width:100%; text:align:center;border:1px solid #00F; font-size:12px;}
th{background:#EEE;width:auto; text-align:center; padding:5px 0;border:1px solid #00F;}
td{width:auto; text-align:center; padding:5px 0;border:1px solid #00F;}
tr:nth-child(even) {background: #EEE;}

HTML

<table>
    <thead>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    </thead>
    <tbody>

    <tr>
        <td>  <a href="/admin/account/0b2bdf4f-c293-418b-a082-ef986eb94148">pelle</a></td>
        <td>  <a href="/admin/account/0b2bdf4f-c293-418b-a082-ef986eb94148">pelle@example</a>       </td>
        <td></td>
        <td></td>
        <td><a href="/admin/editaccount/0b2bdf4f-c293-418b-a082-ef986eb94148"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
    </tr>

    <tr>
        <td>  <a href="/admin/account/21153522-6544-4368-875a-753f4154ff9d">niklas</a></td>
        <td>  <a href="/admin/account/21153522-6544-4368-875a-753f4154ff9d">niklas</a>       </td>
        <td></td>
        <td></td>
        <td><a href="/admin/editaccount/21153522-6544-4368-875a-753f4154ff9d"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
    </tr>

    <tr>
        <td>  <a href="/admin/account/27053a2e-3742-4046-b876-87940c35b5bc">martin</a></td>
        <td>  <a href="/admin/account/27053a2e-3742-4046-b876-87940c35b5bc">martin</a>       </td>
        <td></td>
        <td></td>
        <td><a href="/admin/editaccount/27053a2e-3742-4046-b876-87940c35b5bc"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
    </tr>

    <tr>
        <td>  <a href="/admin/account/5e1947de-1185-44bb-a9f5-170df342124b">henrik</a></td>
        <td>  <a href="/admin/account/5e1947de-1185-44bb-a9f5-170df342124b">henrik</a>       </td>
        <td></td>
        <td></td>
        <td><a href="/admin/editaccount/5e1947de-1185-44bb-a9f5-170df342124b"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
    </tr>

    <tr>
        <td>  <a href="/admin/account/61a11f6e-e3bf-4d07-b05a-f7c3ecf0377f">niklasro@gmail.com</a></td>
        <td>  <a href="/admin/account/61a11f6e-e3bf-4d07-b05a-f7c3ecf0377f">niklasro@gmail.com</a>       </td>
        <td></td>
        <td></td>
        <td><a href="/admin/editaccount/61a11f6e-e3bf-4d07-b05a-f7c3ecf0377f"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
    </tr>

    <tr>
        <td>  <a href="/admin/account/83f96511-550e-4df0-bb77-e569fc0be2bc">marc</a></td>
        <td>  <a href="/admin/account/83f96511-550e-4df0-bb77-e569fc0be2bc">marc</a>       </td>
        <td></td>
        <td></td>
        <td><a href="/admin/editaccount/83f96511-550e-4df0-bb77-e569fc0be2bc"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
    </tr>

    <tr>
        <td>  <a href="/admin/account/95072cd9-749c-42e8-8c11-553def704f62">lukas</a></td>
        <td>  <a href="/admin/account/95072cd9-749c-42e8-8c11-553def704f62">lukas</a>       </td>
        <td></td>
        <td></td>
        <td><a href="/admin/editaccount/95072cd9-749c-42e8-8c11-553def704f62"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
    </tr>

    <tr>
        <td>  <a href="/admin/account/aa2d4b43-1f11-448b-bff1-0d4152c40735">rms</a></td>
        <td>  <a href="/admin/account/aa2d4b43-1f11-448b-bff1-0d4152c40735">rms</a>       </td>
        <td></td>
        <td></td>
        <td><a href="/admin/editaccount/aa2d4b43-1f11-448b-bff1-0d4152c40735"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
    </tr>

    <tr>
        <td>  <a href="/admin/account/c043d631-10e6-4b58-9a0f-6563199d42f7">kalle</a></td>
        <td>  <a href="/admin/account/c043d631-10e6-4b58-9a0f-6563199d42f7">kalle@example</a>       </td>
        <td></td>
        <td></td>
        <td><a href="/admin/editaccount/c043d631-10e6-4b58-9a0f-6563199d42f7"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
    </tr>

    <tr>
        <td>  <a href="/admin/account/f6e53781-4574-4d96-b900-204eaad6e662">blahonga</a></td>
        <td>  <a href="/admin/account/f6e53781-4574-4d96-b900-204eaad6e662">097097</a>       </td>
        <td></td>
        <td></td>
        <td><a href="/admin/editaccount/f6e53781-4574-4d96-b900-204eaad6e662"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
    </tr>

    </tbody>
</table>

Answer 1

将border-collapse:collapse;添加到表css选择器。这将消除嵌套边框外观。此外，您的Text:align:center;应该是text-align:center;

小提琴：http://jsfiddle.net/GParb/1/

CSS

table{
    width:100%;
    border-collapse:collapse;
    text-align:center;
    border:1px solid #00F;
    font-size:12px;
    }

与下面建议的cellspacing="0"不同，此答案会将边框折叠为3D效果，就像OP要求的那样。

比较小提琴：http://jsfiddle.net/GParb/7/

Answer 2

如何删除此表格上的双边框？

1。删除表格的双边外观

只需编辑表格标记，如下所示：

<table cellspacing="0" border="1"> ...</table>

要为边框添加颜色，请添加：bordercolor="#00F"

Demo

但表格的 cellpadding，cellspacing，border等是Deprecated Attributes 。相反，您可以使用与下表中的上述等效的 CSS样式：

---

2。删除表格的双边外观并获得问题中显示的图像的确切输出

最佳解决方案：对border-collapse:collapse;元素使用<table>。

Answer 3

我已经用border-collapse:collapse

对你的小提琴进行了一些修改

JS Fiddle

希望有所帮助

Answer 4

转到您喜欢的标记的源代码，选择“查看页面源”，复制代码，粘贴然后设置样式并自行创建。不管怎么说，你不想太接近其他人的设计。