CODEWITHSUNDEEP
htmlcss
gixlg
gixlg

Reputation: 1355

How to collapse border to table inside a table

I have a html structure like this and I can't figure out how to fix it. 

<table border="0" cellspacing="0" cellpadding="0" align="center" width="200px" class="external">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>
            <table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" class="internal">
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                </tr>
                <tr>
                    <td>Peter</td>
                    <td>Griffin</td>
                </tr>
                <tr>
                    <td>Lois</td>
                    <td>Griffin</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

I'd like to collapse the borders between the external table and the table inside the <td>. Is it possible?

After that I'd like to have the border of the internal table with another color from the external table.

Upvotes: 1

Views: 663

Answers (1)

OneHoopyFrood
OneHoopyFrood

Reputation: 3959

What you're seeing is the borders of the cells in the internal table, not it's external borders. The tricky thing is that you don't want to turn off the borders of those cells completely because then it'll look skoogiwampus.

Try 

.internal {
  border: none;
}
.internal td,
.internal th {
  border-color: yellow;
}
.internal tr:first-child th {
  border-top: none;
}
.internal tr:last-child td {
  border-bottom: none;
}
.internal tr td:first-child,
.internal tr th:first-child {
  border-left: none;
}
.internal tr td:last-child,
.internal tr th:last-child {
  border-right: none;
}

This uses pseudo-selectors to deal only with the borders you need to turn off. It's verbose, but it'll do what you need.

https://jsfiddle.net/aff19ahg/3/

Upvotes: 1

Related Questions