table-col-paint-htb-ltr.html (1028B)
1 <!DOCTYPE html> 2 <link rel="match" href="table-col-paint-htb-ltr-ref.html"> 3 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> 4 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> 5 <style> 6 .multicol { 7 inline-size: 400px; 8 block-size: 100px; 9 columns: 4; 10 column-fill: auto; 11 gap: 0; 12 } 13 .pattern1 { 14 background: repeating-linear-gradient(lime, lime 20px, blue 20px, blue 40px); 15 } 16 .pattern2 { 17 background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); 18 } 19 </style> 20 <div class="multicol"> 21 <table style="border-spacing: 10px; inline-size: 100%;"> 22 <caption style="background: red; block-size: 50px;"></caption> 23 <col class="pattern1"></col> 24 <col class="pattern2"></col> 25 <tr style="block-size: 110px;"> 26 <td></td> 27 <td></td> 28 </tr> 29 <tr style="block-size: 135px;"> 30 <td></td> 31 <td></td> 32 </tr> 33 <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> 34 </table> 35 </div>