html - 具有不同列数的行边框

Question

我正在动态生成一个表格，每行可以有不同数量的单元格 (tds)。我想要在行之间使用分隔线类型的边框。

我尝试在 td 上使用 border-top，但由于 td 的数量不同，它不适用于 td。将 border-top 添加到 tr 也不起作用。

问题:当前代码根据 tds 的数量生成边框，而无论 tds 是多少，所需的结果都是 100% 长度的边框。

.svlist >tbody> tr {
    position: relative;
    padding: 1rem;
    border-top: 2px solid #f1f1f1;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ecf0f1;
}

<table class="table table-borderless svlist">

    <thead>
        <tr>
            <th>Name</th>
            <th>Status</th>
            <th style='text-align: center;' colspan='3'>Control</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>apache2</td>
            <td>
                <div class='circle'></div>
                <div>Running</div>
            </td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='apache2' data-service_control='restart' data-sv='finetapir19344'><span class='glyphicon glyphicon-repeat' aria-hidden='true'></span> Restart</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice disabled' data-toggle='modal' data-target='#serviceBasicModal' data-service='apache2' data-service_control='start' data-sv='finetapir19344'><span class='glyphicon glyphicon-off' aria-hidden='true'></span> Start</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='apache2' data-service_control='stop' data-sv='finetapir19344'><span class='glyphicon glyphicon-stop' aria-hidden='true'></span> Stop</a></td>
            <td align='center' style='width: 100px;'></td>
        </tr>
        <tr>
            <td>monit</td>
            <td>
                <div class='circle'></div>
                <div>Running</div>
            </td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='monit' data-service_control='restart' data-sv='finetapir19344'><span class='glyphicon glyphicon-repeat' aria-hidden='true'></span> Restart</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='monit' data-service_control='start' data-sv='finetapir19344'><span class='glyphicon glyphicon-off' aria-hidden='true'></span> Start</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice disabled' data-toggle='modal' data-target='#serviceBasicModal' data-service='monit' data-service_control='stop' data-sv='finetapir19344'><span class='glyphicon glyphicon-stop' aria-hidden='true'></span> Stop</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link uninstall_monit' data-toggle='modal' data-target='#UninstallMonitModal' data-service='monit' data-service_control='uninstall' data-sv='finetapir19344'><span class='glyphicon glyphicon-remove-circle' aria-hidden='true'></span> Uninstall</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link open_monit' href='#' target='_blank'><span class='glyphicon glyphicon-home' aria-hidden='true'></span> Open</a></td>
        </tr>
        <tr>
            <td>mysql</td>
            <td>
                <div class='circlered'></div>
                <div>Stopped</div>
            </td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='mysql' data-service_control='restart' data-sv='finetapir19344'><span class='glyphicon glyphicon-repeat' aria-hidden='true'></span> Restart</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='mysql' data-service_control='start' data-sv='finetapir19344'><span class='glyphicon glyphicon-off' aria-hidden='true'></span> Start</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice disabled' data-toggle='modal' data-target='#serviceBasicModal' data-service='mysql' data-service_control='stop' data-sv='finetapir19344'><span class='glyphicon glyphicon-stop' aria-hidden='true'></span> Stop</a></td>
            <td align='center' style='width: 100px;'></td>
        </tr>
        <tr>
            <td>php5.6-fpm</td>
            <td>
                <div class='circle'></div>
                <div>Running</div>
            </td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='php5.6-fpm' data-service_control='restart' data-sv='finetapir19344'><span class='glyphicon glyphicon-repeat' aria-hidden='true'></span> Restart</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice disabled' data-toggle='modal' data-target='#serviceBasicModal' data-service='php5.6-fpm' data-service_control='start' data-sv='finetapir19344'><span class='glyphicon glyphicon-off' aria-hidden='true'></span> Start</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='php5.6-fpm' data-service_control='stop' data-sv='finetapir19344'><span class='glyphicon glyphicon-stop' aria-hidden='true'></span> Stop</a></td>
            <td align='center' style='width: 100px;'></td>
        </tr>
        <tr>
            <td>php7.0-fpm</td>
            <td>
                <div class='circle'></div>
                <div>Running</div>
            </td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='php7.0-fpm' data-service_control='restart' data-sv='finetapir19344'><span class='glyphicon glyphicon-repeat' aria-hidden='true'></span> Restart</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice disabled' data-toggle='modal' data-target='#serviceBasicModal' data-service='php7.0-fpm' data-service_control='start' data-sv='finetapir19344'><span class='glyphicon glyphicon-off' aria-hidden='true'></span> Start</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='php7.0-fpm' data-service_control='stop' data-sv='finetapir19344'><span class='glyphicon glyphicon-stop' aria-hidden='true'></span> Stop</a></td>
            <td align='center' style='width: 100px;'></td>
        </tr>
        <tr>
            <td>phpmyadmin</td>
            <td>
                <div class='circle'></div>
                <div>Running</div>
            </td>
            <td align='center' style='width: 100px;'><a class='btn btn-link uninstall_phpmyadmin' data-toggle='modal' data-target='#UninstallPhpmyadminModal' data-service='phpmyadmin' data-service_control='uninstall' data-sv='finetapir19344'><span class='glyphicon glyphicon-remove-circle' aria-hidden='true'></span> Uninstall</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link open_phpmyadmin' href='/xE7wqqsr1Etk3grONrnb0nH' target='_blank'><span class='glyphicon glyphicon-home' aria-hidden='true'></span> Open</a></td>
        </tr>
    </tbody>
</table>

Answer 1

您可以在每个 tr 元素之后或之前使用 pseudo element 而不是 border 但我很确定有一种方法为 tr 而不是 td 设置 border 但现在不记得了。

.svlist >tbody> tr {
    position: relative;
    padding: 1rem;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
}

.svlist >tbody> tr::after {
    content: "";
    width: 100%;
    height: 1px;
    background: #f1f1f1;
    position: absolute;
    left: 0;
}

<table class="table table-borderless svlist">

    <thead>
        <tr>
            <th>Name</th>
            <th>Status</th>
            <th style='text-align: center;' colspan='3'>Control</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>apache2</td>
            <td>
                <div class='circle'></div>
                <div>Running</div>
            </td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='apache2' data-service_control='restart' data-sv='finetapir19344'><span class='glyphicon glyphicon-repeat' aria-hidden='true'></span> Restart</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice disabled' data-toggle='modal' data-target='#serviceBasicModal' data-service='apache2' data-service_control='start' data-sv='finetapir19344'><span class='glyphicon glyphicon-off' aria-hidden='true'></span> Start</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='apache2' data-service_control='stop' data-sv='finetapir19344'><span class='glyphicon glyphicon-stop' aria-hidden='true'></span> Stop</a></td>
            <td align='center' style='width: 100px;'></td>
        </tr>
        <tr>
            <td>monit</td>
            <td>
                <div class='circle'></div>
                <div>Running</div>
            </td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='monit' data-service_control='restart' data-sv='finetapir19344'><span class='glyphicon glyphicon-repeat' aria-hidden='true'></span> Restart</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='monit' data-service_control='start' data-sv='finetapir19344'><span class='glyphicon glyphicon-off' aria-hidden='true'></span> Start</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice disabled' data-toggle='modal' data-target='#serviceBasicModal' data-service='monit' data-service_control='stop' data-sv='finetapir19344'><span class='glyphicon glyphicon-stop' aria-hidden='true'></span> Stop</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link uninstall_monit' data-toggle='modal' data-target='#UninstallMonitModal' data-service='monit' data-service_control='uninstall' data-sv='finetapir19344'><span class='glyphicon glyphicon-remove-circle' aria-hidden='true'></span> Uninstall</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link open_monit' href='#' target='_blank'><span class='glyphicon glyphicon-home' aria-hidden='true'></span> Open</a></td>
        </tr>
        <tr>
            <td>mysql</td>
            <td>
                <div class='circlered'></div>
                <div>Stopped</div>
            </td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='mysql' data-service_control='restart' data-sv='finetapir19344'><span class='glyphicon glyphicon-repeat' aria-hidden='true'></span> Restart</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='mysql' data-service_control='start' data-sv='finetapir19344'><span class='glyphicon glyphicon-off' aria-hidden='true'></span> Start</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice disabled' data-toggle='modal' data-target='#serviceBasicModal' data-service='mysql' data-service_control='stop' data-sv='finetapir19344'><span class='glyphicon glyphicon-stop' aria-hidden='true'></span> Stop</a></td>
            <td align='center' style='width: 100px;'></td>
        </tr>
        <tr>
            <td>php5.6-fpm</td>
            <td>
                <div class='circle'></div>
                <div>Running</div>
            </td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='php5.6-fpm' data-service_control='restart' data-sv='finetapir19344'><span class='glyphicon glyphicon-repeat' aria-hidden='true'></span> Restart</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice disabled' data-toggle='modal' data-target='#serviceBasicModal' data-service='php5.6-fpm' data-service_control='start' data-sv='finetapir19344'><span class='glyphicon glyphicon-off' aria-hidden='true'></span> Start</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='php5.6-fpm' data-service_control='stop' data-sv='finetapir19344'><span class='glyphicon glyphicon-stop' aria-hidden='true'></span> Stop</a></td>
            <td align='center' style='width: 100px;'></td>
        </tr>
        <tr>
            <td>php7.0-fpm</td>
            <td>
                <div class='circle'></div>
                <div>Running</div>
            </td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='php7.0-fpm' data-service_control='restart' data-sv='finetapir19344'><span class='glyphicon glyphicon-repeat' aria-hidden='true'></span> Restart</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice disabled' data-toggle='modal' data-target='#serviceBasicModal' data-service='php7.0-fpm' data-service_control='start' data-sv='finetapir19344'><span class='glyphicon glyphicon-off' aria-hidden='true'></span> Start</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link btnservice' data-toggle='modal' data-target='#serviceBasicModal' data-service='php7.0-fpm' data-service_control='stop' data-sv='finetapir19344'><span class='glyphicon glyphicon-stop' aria-hidden='true'></span> Stop</a></td>
            <td align='center' style='width: 100px;'></td>
        </tr>
        <tr>
            <td>phpmyadmin</td>
            <td>
                <div class='circle'></div>
                <div>Running</div>
            </td>
            <td align='center' style='width: 100px;'><a class='btn btn-link uninstall_phpmyadmin' data-toggle='modal' data-target='#UninstallPhpmyadminModal' data-service='phpmyadmin' data-service_control='uninstall' data-sv='finetapir19344'><span class='glyphicon glyphicon-remove-circle' aria-hidden='true'></span> Uninstall</a></td>
            <td align='center' style='width: 100px;'><a class='btn btn-link open_phpmyadmin' href='/xE7wqqsr1Etk3grONrnb0nH' target='_blank'><span class='glyphicon glyphicon-home' aria-hidden='true'></span> Open</a></td>
        </tr>
    </tbody>
</table>