Twitter-bootstrap table how to get only the outer border lines and not in between rows

Question

I have

<table class="table table-condensed">

I used to have table-bordered in there but it is giving me the lines in between rows. I just want the top, bottom, left and right lines on the outside of the entire table and no lines in between rows.

Also, I tried to do baby steps first and therefore tried to remove the lines in between rows as suggested here Remove row lines in twitter bootstrap and the solution given

table td {
    border-top: none;
}

didn't work for me

Answer 1

For anyone else seeing this recently, you can simply add border class to your table, and that should give it the OUTER border.

Table with outer border

<table class="table">
    <thead class="table border">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
    <tbody>
</table>

---

Table with no border

table-borderless would produce a table without any borders, outer or inner

<table class="table">
    <thead class="table table-borderless">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
    <tbody>
</table>

---

Table with outer border, and no innder borders

To produce a table with the outer border only, and no innder borders, simply add both table-borderless and border classes to the table as such:

<table class="table">
    <thead class="table border table-borderless">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
    <tbody>
</table>

---

Hope this helps anyone out there without having to use CSS etc.