如何删除此表格上的双边框？
尼古拉斯·R。
我正在处理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">[email protected]</a></td>
<td> <a href="/admin/account/61a11f6e-e3bf-4d07-b05a-f7c3ecf0377f">[email protected]</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>
羽状
将添加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/
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用
- 2
使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中
- 3
SQL Server中的非确定性数据类型
- 4
Swift 2.1-对单个单元格使用UITableView
- 5
如何避免每次重新编译所有文件？
- 6
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
- 7
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 8
应用发明者仅从列表中选择一个随机项一次
- 9
在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？
- 10
HttpClient中的角度变化检测
- 11
在Wagtail管理员中，如何禁用图像和文档的摘要项？
- 12
如何了解DFT结果
- 13
Camunda-根据分配的组过滤任务列表
- 14
错误：找不到存根。请确保已调用spring-cloud-contract：convert
- 15
为什么此后台线程中未处理的异常不会终止我的进程？
- 16
构建类似于Jarvis的本地语言应用程序
- 17
使用分隔符将成对相邻的数组元素相互连接
- 18
您如何通过 Nativescript 中的 Fetch 发出发布请求？
- 19
通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）
- 20
使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面
- 21
使用 text() 獲取特定文本節點的 XPath
我来说两句