CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
mrk
mrk

Reputation: 99

How to avoid bootstrap table borders

So I want to avoid the borders in my tbody. Currently my code is:

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

My output currently looks like this: screen

After some research I found out that using tableclass table-borderless might be a solution so I tried it. But what I get in the output doesn't fit my expectations:

I put both table classes to table-borderless screen2

I want to achieve the same with as in the first picture but without the row border lines.

Thanks in advance.

Upvotes: 0

Views: 254

Answers (2)

Orange Orange
Orange Orange

Reputation: 1991

in <head> tag try this css 

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

Upvotes: 0

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

Use this css,it will solved your issue

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

Upvotes: 2

Related Questions