html - HTML表格行上不同颜色的双单边边框

Question

我正在尝试制作一个表格，我希望某些行具有 2 个不同颜色的 35 像素边框，有点像这样:

.

如果您知道这样做的方法，请告诉我，我在网上看到的所有花盆只告诉您如何制作五颜六色的四边形边框，我还没有想出如何修改这些解决方案仅适用于一个边缘。

Answer 1

您只需要将表格包裹在 <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>