HTML表格边框顶部2 px
我试图在我的headcell添加双边框，但在不使用任何背景图像的情况下发现很难。有可能吗？
现在我的边框上面有白色，但我也想要白色的灰色。所以它就像是border-top ccc和fff。
我有什么
我想要什么
我的HTML＆amp; CSS：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
table.hor-zebra {
width: 100%;
text-align: left;
border-collapse: collapse;
border: #cccccc 1px solid;
}
table.hor-zebra>thead {
border-top: #cccccc 1px solid;
}
table.hor-zebra>thead>tr>th {
background: #e2e2e2;
border-top: #ffffff 1px solid;
border-bottom: #cccccc 1px solid;
padding: 4px;
color: #000;
}
table.hor-zebra>tbody>tr>td {
background: #f3f3f3;
border-bottom: #cccccc 1px solid;
padding: 8px 4px 8px 4px;
}
table.hor-zebra>tbody>tr>td.odd {
background: #f8f8f8;
border-bottom: #cccccc 1px solid;
}
table.hor-zebra>tbody>tr:hover td {
background: #faf4f2;
}<table class="hor-zebra">
<thead>
<tr>
<th scope="col">
<span>Title</span>
</th>
<th scope="col">
<span>Date</span>
</th>
<th scope="col">
<span>Actions</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="odd">
<a href="x">x</a>
</td>
<td class="odd">
<span>2017-10-30 19:06:27</span>
</td>
<td class="odd">
<span>
<a href="index.php?open=pages&page=edit_page&page_id=1&editor_language=en">Edit</a>
·
<a href="index.php?open=pages&page=delete_page&page_id=1&editor_language=en">Delete</a>
</span>
</td>
</tr>
<tr>
<td>
<a href="x">awd</a>
</td>
<td>
<span>2017-10-30 19:06:35</span>
</td>
<td>
<span>
<a href="index.php?open=pages&page=edit_page&page_id=2&editor_language=en">Edit</a>
·
<a href="index.php?open=pages&page=delete_page&page_id=2&editor_language=en">Delete</a>
</span>
</td>
</tr>
<tr>
<td class="odd">
<a href="x">awd</a>
</td>
<td class="odd">
<span>2017-10-30 19:14:53</span>
</td>
<td class="odd">
<span>
<a href="index.php?open=pages&page=edit_page&page_id=3&editor_language=en">Edit</a>
·
<a href="index.php?open=pages&page=delete_page&page_id=3&editor_language=en">Delete</a>
</span>
</td>
</tr>
<tr>
<td>
<a href="x">awd</a>
</td>
<td>
<span>2017-10-30 19:15:07</span>
</td>
<td>
<span>
<a href="index.php?open=pages&page=edit_page&page_id=4&editor_language=en">Edit</a>
·
<a href="index.php?open=pages&page=delete_page&page_id=4&editor_language=en">Delete</a>
</span>
</td>
</tr>
<tr>
<td class="odd">
<a href="x">awd</a>
</td>
<td class="odd">
<span>2017-10-30 19:16:47</span>
</td>
<td class="odd">
<span>
<a href="index.php?open=pages&page=edit_page&page_id=5&editor_language=en">Edit</a>
·
<a href="index.php?open=pages&page=delete_page&page_id=5&editor_language=en">Delete</a>
</span>
</td>
</tr>
</tbody>
</table>
我知道CSS可以做到！
3 个答案:
答案 0 :(得分：4)
您需要重置border-spacing:0;而不是border-collapse:collapse;其他th边框和table边框折叠，只显示白色th边框.... < / p>
https://www.w3.org/TR/CSS21/tables.html#value-def-table，https://www.w3.org/wiki/CSS/Properties/border-collapse
border仅当
border-collapse元素上的collapse设置为table时，各种边框属性才会应用于列。在这种情况下，在列和列组上设置的边框将输入到冲突解决算法，用于选择每个单元格边缘的边框样式。
table.hor-zebra {
width: 100%;
text-align: left;
border-spacing:0;
border: #cccccc 1px solid;
}
table.hor-zebra>thead {
border-top: #cccccc 1px solid;
}
table.hor-zebra>thead>tr>th {
background: #e2e2e2;
border-top: #ffffff 1px solid;
border-bottom: #cccccc 1px solid;
padding: 4px;
color: #000;
}
table.hor-zebra>tbody>tr>td {
background: #f3f3f3;
border-bottom: #cccccc 1px solid;
padding: 8px 4px 8px 4px;
}
table.hor-zebra>tbody>tr>td.odd {
background: #f8f8f8;
border-bottom: #cccccc 1px solid;
}
table.hor-zebra>tbody>tr:hover td {
background: #faf4f2;
}<table class="hor-zebra">
<thead>
<tr>
<th scope="col">
<span>Title</span>
</th>
<th scope="col">
<span>Date</span>
</th>
<th scope="col">
<span>Actions</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="odd">
<a href="x">x</a>
</td>
<td class="odd">
<span>2017-10-30 19:06:27</span>
</td>
<td class="odd">
<span>
<a href="index.php?open=pages&page=edit_page&page_id=1&editor_language=en">Edit</a>
·
<a href="index.php?open=pages&page=delete_page&page_id=1&editor_language=en">Delete</a>
</span>
</td>
</tr>
<tr>
<td>
<a href="x">awd</a>
</td>
<td>
<span>2017-10-30 19:06:35</span>
</td>
<td>
<span>
<a href="index.php?open=pages&page=edit_page&page_id=2&editor_language=en">Edit</a>
·
<a href="index.php?open=pages&page=delete_page&page_id=2&editor_language=en">Delete</a>
</span>
</td>
</tr>
<tr>
<td class="odd">
<a href="x">awd</a>
</td>
<td class="odd">
<span>2017-10-30 19:14:53</span>
</td>
<td class="odd">
<span>
<a href="index.php?open=pages&page=edit_page&page_id=3&editor_language=en">Edit</a>
·
<a href="index.php?open=pages&page=delete_page&page_id=3&editor_language=en">Delete</a>
</span>
</td>
</tr>
<tr>
<td>
<a href="x">awd</a>
</td>
<td>
<span>2017-10-30 19:15:07</span>
</td>
<td>
<span>
<a href="index.php?open=pages&page=edit_page&page_id=4&editor_language=en">Edit</a>
·
<a href="index.php?open=pages&page=delete_page&page_id=4&editor_language=en">Delete</a>
</span>
</td>
</tr>
<tr>
<td class="odd">
<a href="x">awd</a>
</td>
<td class="odd">
<span>2017-10-30 19:16:47</span>
</td>
<td class="odd">
<span>
<a href="index.php?open=pages&page=edit_page&page_id=5&editor_language=en">Edit</a>
·
<a href="index.php?open=pages&page=delete_page&page_id=5&editor_language=en">Delete</a>
</span>
</td>
</tr>
</tbody>
</table>
答案 1 :(得分：0)
使用
table {
border-top: 2px solid black;
}
文档：https://developer.mozilla.org/en-US/docs/Web/CSS/border-top
答案 2 :(得分：0)
如果您需要在子元素之前使用某些元素，则可以使用Pseudo：before。
试试这个：
table.hor-zebra>thead>tr>th {
background: #e2e2e2;
border-top: #ffffff 3px solid;
border-bottom: #cccccc 1px solid;
padding: 4px;
color: #000;
posistion:relative;
}
table.hor-zebra>thead>tr>th:before{
content:"";
position:absolute;
height:2px;
width:100%;
background-color:#cccccc;
top:-1px;
left:-1px;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？