Html Question posted in
Some basic documentation can be found here.

Why is the border-collapse property not working for my HTML table

I have the following table with nested tables. Why is the border collapse property not working for my HTML table.

I have added the border-collapse property on both the main table and the nested tables. All I see are the outer borders and no inside borders.

<table style="border-collapse: collapse;">
    <tr>
        <th>Existing data</th>
        <th>New table</th>
    </tr>
    <tr>
        <td>
            <!-- Nested Table 1 -->
            <table style="border-collapse: collapse;">
                <tr>
                    <th>Hostname</th>
                    <th>IP</th>
                    <th>MAC</th>
                </tr>
                <tr>
                    <td>ftp01</td>
                    <td>10.1.1.4</td>
                    <td>...01</td>
                </tr>
                <tr>
                    <td>www01</td>
                    <td>10.1.1.5</td>
                    <td>...02</td>
                </tr>
            </table>
        </td>
        <td>
            <!-- Nested Table 2 -->
            <table style="border-collapse: collapse;">
                <tr>
                    <th>IP</th>
                    <th>MAC</th>
                    <th>Owner</th>
                </tr>
                <tr>
                    <td>10.1.1.4</td>
                    <td>...bb</td>
                    <td>alice</td>
                </tr>
                <tr>
                    <td>10.1.1.6</td>
                    <td>...cc</td>
                    <td>bob</td>
                </tr>
                <tr>
                    <td>10.1.1.7</td>
                    <td>...dd</td>
                    <td>chris</td>
                </tr>
                <tr>
                    <td>10.1.1.4</td>
                    <td>...ee</td>
                    <td>doug</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
Tags:

2

Answers


  1. 0

    if you’re scratching your head over those inner borders disappearing in your HTML table. There’s a quick fix! Just give some attention to the outer cells that hold those nested tables. Add in a bit of style with style="border: 1px solid black;" on those elements, You’ll see those inner borders pop back into view, even when border-collapse: collapse; is doing its thing. Check out the HTML below:

    <table style="border-collapse: collapse;">
    <tr>
        <th>Existing data</th>
        <th>New table</th>
    </tr>
    <tr>
        <td style="border: 1px solid black;">
            <!-- Nested Table 1 -->
            <table style="border-collapse: collapse;">
                <!-- Table content -->
            </table>
        </td>
        <td style="border: 1px solid black;">
            <!-- Nested Table 2 -->
            <table style="border-collapse: collapse;">
                <!-- Table content -->
            </table>
        </td>
    </tr>
</table>
    Login or Signup to reply.
  2. 0

    I think you want to do simply this:

    <table border="1" style="border-collapse: collapse;">

    This code snippet displays a table with borders around each cell, collapsed to single lines.

    Alternative:

    table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black; /* Border for cells */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search