HTML表格行上不同颜色的双面单面边框
HTML表格行上不同颜色的双面单面边框
提问于 2018-07-04 04:43:16
我正在尝试制作一个表格，我想让一些行有两个不同颜色的35px边框，有点像这样：
。
如果你知道这样做的方法，请告诉我，我在网上看到的所有花盆都只告诉你如何制作一个多彩的四边边框，而我还没有想出如何修改这些解决方案，使其只适用于一条边。
回答 2
Stack Overflow用户
发布于 2018-07-04 05:33:31
您只需要将表格包装在<div>中，并应用左边距和负框阴影。
<style type="text/css">
.outer {
padding-top: 35px;
margin-left: 35px;
box-shadow: -35px 0 0 rgba(0,0,128,0.8)
}
.outer table {
border-collapse: collapse;
}
.outer th, .outer td {
padding: 3px;
}
.ltBlue {
background-color:cornflowerblue;
color: white;
font-weight: 500;
}
.outer tr td:first-child {
width: 35px;
padding: 0;
}
.outer tr td:nth-child(5) {
text-align: right;
}
</style>还有..。
<div class="outer">
<table>
<tr>
<td class="ltBlue"> </td>
<td class="ltBlue" colspan="4" style="text-align: center;">Overdue Books</td>
</tr>
<tr>
<td class="ltBlue"> </td>
<th>Date</th>
<th>Title</th>
<th>Due</th>
<th>Fine</th>
</tr>
<tr>
<td class="ltBlue"> </td>
<td>01/20/2018</td>
<td>Goodnight Moon</td>
<td>01/14/2018</td>
<td>$6.34</td>
</tr>
<tr>
<td class="ltBlue"> </td>
<td>01/20/2018</td>
<td>Goodnight Moon</td>
<td>01/14/2018</td>
<td>$6.34</td>
</tr>
</table>
</div>Stack Overflow用户
发布于 2018-07-04 11:10:59
这应该会带你去你想去的地方。
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="table_2_border" style="width:300px;border-left:1px solid orange;border-top:1px solid black;border-right:1px solid pink;border-bottom:1px solid yellow">
<table style="width:295px;margin-right:auto;margin-left:auto;border-left:1px solid green;border-top:1px solid blue;border-right:1px solid yellow;border-bottom:1px solid red">
<tr>
<th style="border-left:1px solid green;border-bottom:1px solid pink">One</th>
<th style="border-left:1px solid red;">Two</th>
<th style="border-left:1px solid blue;">Three</th>
<th style="border-left:1px solid orange;">Four</th>
</tr>
<tr>
<td>One info</td>
<td>Two info</td>
<td>Three info</td>
<td>Four info</td>
</tr>
</table>
</div>
</body>
</html>正如您所看到的，您可以根据您选择的颜色设置每个部分的样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51162582
复制相关文章
相似问题