<table class="mod-table-01 mod-table-01--line-color-green"> <tr> <th>foo</th> <th>bar</th> </tr> <tr> <td>baz</td> <td>foobar</td> </tr> </table> <table class="mod-table-02--line-color-green"> <tr> <th>foo</th> <th>bar</th> </tr> <tr> <td>baz</td> <td>foobar</td> </tr> </table>
/* multiple class (503 byte), full-width=2byte, half-width=1byte, break=2byte */ .mod-table-01 { border: 1px solid black; border-collapse: collapse; margin: 10px auto; } .mod-table-01 th, .mod-table-01 td { padding: 5px; border: 1px solid black; } .mod-table-01 th { font-weight: bold; } .mod-table-01--line-color-green { border: 1px solid green; } .mod-table-01--line-color-green th, .mod-table-01--line-color-green td { border: 1px solid green; } .mod-table-01--line-color-green th { background-color: #01ff70; } /* single class (648 byte), full-width=2byte, half-width=1byte, break=2byte */ .mod-table-02, .mod-table-02--line-color-green { border: 1px solid black; border-collapse: collapse; margin: 10px auto; } .mod-table-02 th, .mod-table-02--line-color-green th, .mod-table-02 td, .mod-table-02--line-color-green td { padding: 5px; border: 1px solid black; } .mod-table-02 th, .mod-table-02--line-color-green th { font-weight: bold; } .mod-table-02--line-color-green { border: 1px solid green; } .mod-table-02--line-color-green th, .mod-table-02--line-color-green td { border: 1px solid green; } .mod-table-02--line-color-green th { background-color: #01ff70; }