细分列在Chrome中不适用于表格元素?

时间:2018-08-19 22:02:36

标签: css css3 printing css-multicolumn-layout

我正在建立一个多列布局,其中有一个包含多行的表。我想控制在该表的哪个位置对下一个列进行一些列中断,但似乎很麻烦:列在表元素中不起作用。

是真的还是我使用的CSS规则有误?

我测试过,如果它是<p>元素的列表,则break-after: column可以正常工作。

codepen example

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>

0 个答案:

没有答案