collapsed-border-large-cell.html (1107B)
1 <!DOCTYPE html> 2 <title>Collapsed borders of large cells</title> 3 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> 4 <link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" /> 5 <link rel="match" href="collapsed-border-large-cell-ref.html" /> 6 <meta name="assert" content="Collapsed borders of large cells can collapse a single edge."> 7 <style> 8 main * { 9 box-sizing: border-box; 10 } 11 main table { 12 border-collapse: collapse; 13 } 14 main td { 15 padding:0px; 16 width: 50px; 17 height:50px; 18 border: 2px solid black; 19 } 20 </style> 21 <main> 22 <table> 23 <colgroup style="border:6px solid blue;background:rgba(0,0,255,0.5);"></colgroup> 24 <tr> 25 <td rowspan=4></td> 26 <td></td> 27 <td></td> 28 <td></td> 29 </tr> 30 <tr> 31 <td rowspan=2 colspan=2 style="border:4px solid green; background: rgba(0,255,0, 0.5);"></td> 32 <td style="border: 6px solid yellow;background:rgba(255,255, 0, 0.5)"></td> 33 </tr> 34 <td></td> 35 <tr> 36 <td colspan=3 style="border:6px solid orange;background:rgba(255,165,0,0.5)"></td> 37 </tr> 38 </table> 39 </main>