我正在建立一个多列布局,其中有一个包含多行的表。我想控制在该表的哪个位置对下一个列进行一些列中断,但似乎很麻烦:列在表元素中不起作用。
是真的还是我使用的CSS规则有误?
我测试过,如果它是<p>
元素的列表,则break-after: column
可以正常工作。
main {
column-width: 200px;
}
<main>
<table class="pdf__individual-guests-table">
<tbody>
<tr>
<td>Ali Weatherford</td>
<td class="alignR">1</td>
</tr>
<tr>
<td>Alison Kontos</td>
<td class="alignR">2</td>
</tr>
<tr style="break-after: column;">
<td style="break-after: column;">Alix Westlake</td>
<td style="break-after: column;">3</td>
</tr>
<tr >
<td>Alix Westlake +1</td>
<td class="alignR">4</td>
</tr>
<tr>
<td>Cristopher Gupta</td>
<td class="alignR">7</td>
</tr>
<tr>
<td>Cristopher Gupta +1</td>
<td class="alignR">8</td>
</tr>
<tr>
<td>Daina Sohn</td>
<td class="alignR">9</td>
</tr>
<tr>
<td>Daina Sohn +1</td>
<td class="alignR">10</td>
</tr>
<tr>
<td>Daina Sohn +2</td>
<td class="alignR">11</td>
</tr>
<tr>
<td>Daina Sohn +3</td>
<td class="alignR">12</td>
</tr>
<tr>
<td>Darcie Spaulding</td>
<td class="alignR">20</td>
</tr>
<tr>
<td>Darcie Spaulding +1</td>
<td class="alignR">21</td>
</tr>
<tr>
<td>Darcie Spaulding +2</td>
<td class="alignR">22</td>
</tr>
<tr>
<td>Darcie Spaulding +3</td>
<td class="alignR">23</td>
</tr>
<tr>
<td>Darcie Spaulding +4</td>
<td class="alignR">24</td>
</tr>
<tr style="
break-after: column;
">
<td>Darcie Spaulding +5</td>
<td class="alignR" style="
break-after: column;
">25</td>
</tr>
<tr>
<td>Darcie Spaulding +6</td>
<td class="alignR">26</td>
</tr>
<tr>
<td>Darcie Spaulding +7</td>
<td class="alignR">27</td>
</tr>
<tr>
<td>davif sss</td>
<td class="alignR">28</td>
</tr>
<tr>
<td>Delois Easterwood</td>
<td class="alignR">29</td>
</tr>
<tr>
<td>Delois Easterwood +1</td>
<td class="alignR">30</td>
</tr>
<tr>
<td>Delois Easterwood +2</td>
<td class="alignR">31</td>
</tr>
<tr>
<td>Delois Easterwood +3</td>
<td class="alignR">32</td>
</tr>
<tr>
<td>Ethyl Patnaude</td>
<td class="alignR">33</td>
</tr>
<tr>
<td>Ethyl Patnaude +1</td>
<td class="alignR">34</td>
</tr>
<tr>
<td>Etta Shain</td>
<td class="alignR">35</td>
</tr>
<tr>
<td>Etta Shain +1</td>
<td class="alignR">36</td>
</tr>
<tr>
<td>Etta Shain +2</td>
<td class="alignR">37</td>
</tr>
<tr>
<td>Eulah Meis</td>
<td class="alignR">38</td>
</tr>
<tr>
<td>Eulah Meis +1</td>
<td class="alignR">39</td>
</tr>
<tr>
<td>Eulah Meis +2</td>
<td class="alignR">40</td>
</tr>
<tr>
<td>Eulah Meis +3</td>
<td class="alignR">41</td>
</tr>
<tr>
<td>Eulah Meis +4</td>
<td class="alignR">42</td>
</tr>
<tr>
<td>Eulah Meis +5</td>
<td class="alignR">43</td>
</tr>
<tr>
<td>Eulah Meis +6</td>
<td class="alignR">44</td>
</tr>
<tr>
<td>Fritz Jaffe</td>
<td class="alignR">45</td>
</tr>
<tr>
<td>Gala Giroir</td>
<td class="alignR">46</td>
</tr>
<tr>
<td>Gala Giroir +1</td>
<td class="alignR">47</td>
</tr>
<tr>
<td>Gale Hallford</td>
<td class="alignR">48</td>
</tr>
<tr>
<td>Gale Hallford +1</td>
<td class="alignR">49</td>
</tr>
<tr>
<td>Geoffrey Pinette</td>
<td class="alignR">50</td>
</tr>
<tr>
<td>Geoffrey Pinette +1</td>
<td class="alignR">51</td>
</tr>
<tr>
<td>Gilbert Bachmann</td>
<td class="alignR">52</td>
</tr>
<tr>
<td>Gilbert Bachmann +1</td>
<td class="alignR">53</td>
</tr>
<tr>
<td>Goldie Lamers</td>
<td class="alignR">54</td>
</tr>
<tr>
<td>Goldie Lamers +1</td>
<td class="alignR">55</td>
</tr>
<tr>
<td>Goldie Lamers +2</td>
<td class="alignR">56</td>
</tr>
<tr>
<td>Goldie Lamers +3</td>
<td class="alignR">57</td>
</tr>
<tr>
<td>Harriet Lindsley</td>
<td class="alignR">58</td>
</tr>
<tr>
<td>Harriet Lindsley +1</td>
<td class="alignR">59</td>
</tr>
<tr>
<td>Harriet Lindsley +2</td>
<td class="alignR">60</td>
</tr>
<tr>
<td>Henriette Mechling</td>
<td class="alignR">61</td>
</tr>
<tr>
<td>Hien Stull</td>
<td class="alignR">63</td>
</tr>
<tr>
<td>Hien Stull +1</td>
<td class="alignR">64</td>
</tr>
<tr>
<td>Hien Stull +2</td>
<td class="alignR">65</td>
</tr>
<tr>
<td>Hien Stull +3</td>
<td class="alignR">66</td>
</tr>
<tr>
<td>Hugo Bryan</td>
<td class="alignR">67</td>
</tr>
<tr>
<td>Hugo Bryan +1</td>
<td class="alignR">68</td>
</tr>
<tr>
<td>Loree Brick</td>
<td class="alignR">75</td>
</tr>
<tr>
<td>Loree Brick +1</td>
<td class="alignR">76</td>
</tr>
<tr>
<td>Loree Brick +2</td>
<td class="alignR">77</td>
</tr>
<tr>
<td>Loree Brick +3</td>
<td class="alignR">78</td>
</tr>
<tr>
<td>Moon Dumais</td>
<td class="alignR">90</td>
</tr>
<tr>
<td>Moon Dumais +1</td>
<td class="alignR">91</td>
</tr>
<tr>
<td>Moon Dumais +2</td>
<td class="alignR">92</td>
</tr>
<tr>
<td>Moon Dumais +3</td>
<td class="alignR">93</td>
</tr>
</tbody></table>
</main>