HTML表行上不同颜色的双单面边框?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (174)

我试图制作一个表,我希望其中的一些行有两个不同颜色的35 px边框,有点像这样:

如果你知道这样做的方法,请告诉我,我在网上看到的所有花盆都只告诉你如何做一个五彩四边边框,而我还没有想出如何修改这些解决方案,使之只适用于一个边。

提问于
用户回答回答于

可以试试:

<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>
用户回答回答于

你只需将表包装在<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">&nbsp;</td>
                <td class="ltBlue" colspan="4" style="text-align: center;">Overdue Books</td>
            </tr>
            <tr>
                <td class="ltBlue">&nbsp;</td>
                <th>Date</th>
                <th>Title</th>
                <th>Due</th>
                <th>Fine</th>
            </tr>
            <tr>
                <td class="ltBlue">&nbsp;</td>
                <td>01/20/2018</td>
                <td>Goodnight Moon</td>
                <td>01/14/2018</td>
                <td>$6.34</td>
            </tr>
            <tr>
                <td class="ltBlue">&nbsp;</td>
                <td>01/20/2018</td>
                <td>Goodnight Moon</td>
                <td>01/14/2018</td>
                <td>$6.34</td>
            </tr>
        </table>
    </div>

扫码关注云+社区

领取腾讯云代金券