Search code examples
csshtml-tableborder

bug where the border of the table is not visible

i don't understand why border of first tbody tr's td is not visible.

enter image description here i think there is no reason border is not visible.

what i fugure out is this.

  1. if natural height of th is higher than height i fixed for th, first tbody tr's td is visible.
  2. if there is no code th{height: xxpx; }, first tbody tr's td is visible.

.table {
  border-spacing: 0;
  border-collapse: collapse;
}

.table.summary-style
{
    font-size: 11px;

    width: 100%;

    table-layout: fixed;

    text-align: center;

    color: #666;
    border-bottom: 1px solid #666;
    background: #fff;
}

.table.summary-style caption
{
    font-size: 0;
    line-height: 0;

    display: none;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);

    width: 0;
    height: 0;
    margin: 0;
    padding: 0;

    opacity: 0;
}

.table.summary-style thead th
{
    font-size: 16px;
    line-height: 1;

    position: relative;

    box-sizing: border-box;
    height: 38px;
    padding: 5px 4px;

    text-align: center;
    vertical-align: middle;

    color: #666;
    background: #ddd;
}

.table.summary-style > tbody > tr > td
{
    font-size: 13px;
    line-height: 1.38;

    box-sizing: border-box;
    height: 36px;
    padding: 4px 10px;

    text-align: left;
    vertical-align: middle;

    color: #666;
    border-top: 1px solid #666;
    background: #fff;
}
<table class="table summary-style">
         
         
        <thead>
            <tr>
                <th scope="col">title</th>
                <th scope="col">title</th>
                <th scope="col">title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">No Data.</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
        </tbody>
    </table>

Solution

  • This is happening because position: relative; on .table.summary-style thead th causes that row of elements to appear 'above' the borders of other elements. This is despite the fact that box-sizing: border-box; has been used, as the borders of the table elements have been collapsed together. The solution is to either remove position: relative; on the first row or remove border-collapse: collapse; from .table.

    .table {
  border-spacing: 0;
  border-collapse: collapse;
}

.table.summary-style
{
    font-size: 11px;

    width: 100%;

    table-layout: fixed;

    text-align: center;

    color: #666;
    border-bottom: 1px solid #666;
    background: #fff;
}

.table.summary-style caption
{
    font-size: 0;
    line-height: 0;

    display: none;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);

    width: 0;
    height: 0;
    margin: 0;
    padding: 0;

    opacity: 0;
}

.table.summary-style thead th
{
    font-size: 16px;
    line-height: 1;

    box-sizing: border-box;
    height: 38px;
    padding: 5px 4px;

    text-align: center;
    vertical-align: middle;

    color: #666;
    background: #ddd;
}

.table.summary-style > tbody > tr > td
{
    font-size: 13px;
    line-height: 1.38;

    box-sizing: border-box;
    height: 36px;
    padding: 4px 10px;

    text-align: left;
    vertical-align: middle;

    color: #666;
    border-top: 1px solid #666;
    background: #fff;
}
    <table class="table summary-style">
         
         
        <thead>
            <tr>
                <th scope="col">title</th>
                <th scope="col">title</th>
                <th scope="col">title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">No Data.</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
        </tbody>
    </table>