Question

所以我想避开我的边界。目前我的代码是：

.yourwebsite.com

我的输出目前看起来像这样：

经过一番研究后我发现使用tableclass <body> <div class="container"> <div class="row"> <div class="col-md-6"> <table class="table"> <thead> <tr> <th>TIME</th> <th>LOCATION</th> <th>MESSAGE</th> </tr> </thead> <tbody> <c:forEach items="${dbitems}" var="item" begin = "0" end = "5"> <tr> <td>${item.time}</td> <td>${item.location}</td> <td>${item.message}</td> </tr> </c:forEach> </tbody> </table> </div> <div class="col-md-6"> <table class="table"> <thead> <tr> <th>TIME</th> <th>LOCATION</th> <th>MESSAGE</th> </tr> </thead> <tbody> <c:forEach items="${dbitems}" var="item" begin = "6" end = "11"> <tr> <td>${item.time}</td> <td>${item.location}</td> <td>${item.message}</td> </tr> </c:forEach> </tbody> </table> </div> </div> </div>可能是一个解决方案，所以我试了一下。但是我在输出中得到的东西并不符合我的期望：

我把两个表类放到table-borderless

我希望与第一张图片相同，但没有行边框线。

提前致谢。

Answer 1

使用此css，它将解决您的问题

.table.table-bl thead>tr>th, .table.table-bl tbody>tr>th, .table.table-bl tfoot>tr>th, .table.table-bl thead>tr>td, .table.table-bl tbody>tr>td, .table.table-bl tfoot>tr>td {
    border-top: none;
}
.table.table-bl thead>tr>th {
    border-bottom: none;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <table class="table table-bl">
                <thead>
                    <tr>
                        <th>TIME</th>
                        <th>LOCATION</th>
                        <th>MESSAGE</th>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach items="${dbitems}" var="item" begin = "0" end = "5">
                        <tr>
                            <td>${item.time}</td>
                            <td>${item.location}</td>
                            <td>${item.message}</td>
                        </tr>
                        <tr>
                            <td>${item.time}</td>
                            <td>${item.location}</td>
                            <td>${item.message}</td>
                        </tr>
                        <tr>
                            <td>${item.time}</td>
                            <td>${item.location}</td>
                            <td>${item.message}</td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
        <div class="col-md-6">
            <table class="table table-bl">
                <thead>
                    <tr>
                        <th>TIME</th>
                        <th>LOCATION</th>
                        <th>MESSAGE</th>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach items="${dbitems}" var="item" begin = "6" end = "11">
                        <tr>
                            <td>${item.time}</td>
                            <td>${item.location}</td>
                            <td>${item.message}</td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 2

在<head>标记中

尝试此css

 <style>
    body, div, table, tr, th {
    border-style: none !important;}
 </style>

如何避免引导表边框

2 个答案: