行边界与不同数量的列

时间：2017-03-18 06:37:51

标签： html css twitter-bootstrap

我正在动态生成一个表，每行可以有不同数量的单元格（tds）。我希望行之间有一个分隔符类型边框。

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

问题：当前代码根据tds的数量生成边框，并且所需的结果具有相等的100％长度边框，与tds无关。

enter image description here 

.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>

2 个答案:

答案 0 :(得分：2)

您可以在每个pseudo element元素之后使用tr而不是border，但我也非常确定有一种方法可以设置border tr代替td，但现在不记得了。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这些应该可以解决问题

.table {
  border-collapse: collapse;
}
相关问题
最新问题