table-empty-cells.html | Explore in Territory

<!DOCTYPE HTML>
<style> 
    table {
        border-spacing: 0px;
        width: 100%;
    }
    .percent { width:calc(50%); }
    .fixed   { width:calc(400px); }
    .cell1   { height:calc(25px); background-color: aqua }
    .border  { border: calc(2px) solid green } 
    .padding { padding: calc(2px) } 
    .margin  { margin: calc(2px) } 
    .pre     { white-space: pre }
    table    { border: calc(2px) solid black }
</style>
<body leftmargin="0" topmargin="0">
    <table>
        <tbody>
        <tr>
        <td/>
        <td class="cell1">First cell empty, second auto width</td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
        <td/>
        <td class="cell1 percent">First cell empty, second percent width</td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
        <td/>
        <td class="cell1 fixed">First cell empty, second fixed width</td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
        <td class="pre"> </td>
        <td class="cell1 percent">First cell empty (with space) and has white-space:pre</td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
        <td class="pre"></td>
        <td class="cell1 percent">First cell empty (no space) and has white-space:pre</td>
        </tr>
        </tbody>
    </table>

    <table id=c width="100%">
        <tbody>
        <tr>
        <td class="border"> </td>
        <td class="cell1 percent">First cell empty but has border</td>
        </tr>
        </tbody>
    </table>

    <table id=c width="100%">
        <tbody>
        <tr>
        <td class="padding"> </td>
        <td class="cell1 percent">First cell empty but has padding</td>
        </tr>
        </tbody>
    </table>

    <table id=c cellpadding="1" width="100%">
        <tbody>
        <tr>
        <td/>
        <td class="cell1 percent">First cell empty, table has cellpadding</td>
        </tr>
        </tbody>
    </table>

    <table id=c cellspacing="1" width="100%">
        <tbody>
        <tr>
        <td/>
        <td class="cell1 percent">First cell empty, table has cellspacing</td>
        </tr>
        </tbody>
    </table>

    <table id=c width="100%">
        <tbody>
        <tr>
        <td class="margin"> </td>
        <td class="cell1 percent">First cell empty but has margin</td>
        </tr>
        </tbody>
    </table>

    <table id=e width="100%">
        <tbody>
        <tr>
        <td class="bgcolor"> </td>
        <td class="cell1 percent">First cell empty but has background color</td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
        <td/>
        <td class="cell1 percent">First row, first cell empty</td>
        </tr>
        <tr>
        <td> text </td>
        <td class="cell1 percent">Second row, first cell not empty</td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
        <td/>
        <td class="cell1 percent">First row, first cell empty</td>
        </tr>
        <tr>
        <td/>
        <td class="cell1 percent">Second row, first cell empty</td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
        <td colspan="2"> </td>
        <td class="cell1 percent">First cell empty, has colspan</td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
        <td/>
        <td class="cell1"> text </td>
        <td class="cell1 percent">First row, first cell empty, second cell non-empty</td>
        </tr>
        <tr>
        <td colspan="2"> </td>
        <td class="cell1">Second row, first cell empty with colspan=2</td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
        <td class="cell1"> text </td>
        <td/>
        <td class="cell1 percent">First row, first cell non-empty, second cell empty</td>
        </tr>
        <tr>
        <td colspan="2"> </td>
        <td class="cell1">Second row, first cell empty with colspan=2</td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
        <td/>
        <td/>
        <td class="cell1 percent">First row, first and second cell empty</td>
        </tr>
        <tr>
        <td colspan="2"> </td>
        <td class="cell1 percent">Second row, first cell empty, has colspan=2</td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
        <td/>
        <td/>
        <td class="cell1 percent">First row, first and second cell empty</td>
        </tr>
        <tr>
        <td class="percent" colspan="2"> </td>
        <td class="cell1 percent">Second row, first cell empty, has colspan=2 and percent width</td>
        </tr>
        </tbody>
    </table>

    <table>
        <tbody>
        <tr>
        <td/>
        <td/>
        <td class="cell1 percent">First row, first and second cell empty</td>
        </tr>
        <tr>
        <td class="fixed" colspan="2"> </td>
        <td class="cell1 percent">Second row, first cell empty, has colspan=2 and fixed width</td>
        </tr>
        </tbody>
    </table>

    One empty cell:
    <table>
        <tbody>
        <tr>
        <td/>
        </tr>
        </tbody>
    </table>

    Two empty cells:
    <table>
        <tbody>
        <tr>
        <td/>
        <td/>
        </tr>
        </tbody>
    </table>
</body>
chromium/third_party/blink/web_tests/css3/calc/table-empty-cells.html
