html - How to prevent column break between 2 tr elements?

I have an html table that I want to display in 2 columns. Most rows are addresses; a few are neighborhoods. I want to prevent a column break after a neighborhood row. How do I accomplish this? In the example below, how do I prevent a column break after the .neighborhood row containing "B:"?

#addresses {
  column-count: 2;
}

<div id="addresses">
  <table>
    <tbody>
      <tr class="neighborhood"><td colspan="2">A:</td></tr>
      <tr class="address"><td>1 Street</td><td>Smith</td></tr>
      <tr class="address"><td>2 Street</td><td>Jones</td></tr>
      <tr class="address"><td>3 Street</td><td>Smith</td></tr>
      <tr class="address"><td>4 Street</td><td>Jones</td></tr>
      <tr class="address"><td>5 Street</td><td>Smith</td></tr>
      <tr class="address"><td>6 Street</td><td>Jones</td></tr>
      <tr class="address"><td>7 Street</td><td>Smith</td></tr>
      <tr class="address"><td>8 Street</td><td>Jones</td></tr>
      <tr class="address"><td>9 Street</td><td>Smith</td></tr>
      <tr class="address"><td>10 Street</td><td>Jones</td></tr>
      <tr class="address"><td>11 Street</td><td>Smith</td></tr>
      <tr class="neighborhood"><td colspan="2">B:</td></tr>
      <tr class="address"><td>12 Street</td><td>Jones</td></tr>
      <tr class="address"><td>13 Street</td><td>Smith</td></tr>
      <tr class="address"><td>14 Street</td><td>Jones</td></tr>
      <tr class="address"><td>15 Street</td><td>Smith</td></tr>
      <tr class="neighborhood"><td colspan="2">C:</td></tr>
      <tr class="address"><td>16 Street</td><td>Jones</td></tr>
      <tr class="address"><td>17 Street</td><td>Smith</td></tr>
      <tr class="address"><td>18 Street</td><td>Jones</td></tr>
      <tr class="address"><td>19 Street</td><td>Smith</td></tr>
      <tr class="address"><td>20 Street</td><td>Jones</td></tr>
      <tr class="address"><td>21 Street</td><td>Smith</td></tr>
      <tr class="address"><td>22 Street</td><td>Jones</td></tr>
      <tr class="address"><td>23 Street</td><td>Smith</td></tr>
    </tbody>
  </table>
</div>

#addresses {
  column-count: 2;
}

<div id="addresses">
  <table>
    <tbody>
      <tr class="neighborhood"><td colspan="2">A:</td></tr>
      <tr class="address"><td>1 Street</td><td>Smith</td></tr>
      <tr class="address"><td>2 Street</td><td>Jones</td></tr>
      <tr class="address"><td>3 Street</td><td>Smith</td></tr>
      <tr class="address"><td>4 Street</td><td>Jones</td></tr>
      <tr class="address"><td>5 Street</td><td>Smith</td></tr>
      <tr class="address"><td>6 Street</td><td>Jones</td></tr>
      <tr class="address"><td>7 Street</td><td>Smith</td></tr>
      <tr class="address"><td>8 Street</td><td>Jones</td></tr>
      <tr class="address"><td>9 Street</td><td>Smith</td></tr>
      <tr class="address"><td>10 Street</td><td>Jones</td></tr>
      <tr class="address"><td>11 Street</td><td>Smith</td></tr>
      <tr class="neighborhood"><td colspan="2">B:</td></tr>
      <tr class="address"><td>12 Street</td><td>Jones</td></tr>
      <tr class="address"><td>13 Street</td><td>Smith</td></tr>
      <tr class="address"><td>14 Street</td><td>Jones</td></tr>
      <tr class="address"><td>15 Street</td><td>Smith</td></tr>
      <tr class="neighborhood"><td colspan="2">C:</td></tr>
      <tr class="address"><td>16 Street</td><td>Jones</td></tr>
      <tr class="address"><td>17 Street</td><td>Smith</td></tr>
      <tr class="address"><td>18 Street</td><td>Jones</td></tr>
      <tr class="address"><td>19 Street</td><td>Smith</td></tr>
      <tr class="address"><td>20 Street</td><td>Jones</td></tr>
      <tr class="address"><td>21 Street</td><td>Smith</td></tr>
      <tr class="address"><td>22 Street</td><td>Jones</td></tr>
      <tr class="address"><td>23 Street</td><td>Smith</td></tr>
    </tbody>
  </table>
</div>

EDIT: Since posting, I have discovered that column-count is ignored in FF and Tor browsers. (All okay in Chrome, Opera, Edge, Brave browsers and Android device.)

And adding -moz-column-count: 2; -webkit-column-count: 2; had no effect.

And if I move the column-count property to the table, it fails on all browsers.

Share Improve this question edited Mar 31 at 12:46 DarkBee 15.5k8 gold badges72 silver badges117 bronze badges asked Mar 31 at 12:05 oyvey 6091 gold badge9 silver badges20 bronze badges

1. Awesome, thanks! 2. But ouch! What do I do in FF? – oyvey Commented Mar 31 at 12:12
I tested my page on FF and on FF, it's all displaying in 1 column, completely ignoring column-count! In Opera, Chrome, Edge, Brave, all okay. On my Android smartphone okay. But on FF and Tor, one column. – oyvey Commented Mar 31 at 12:20
A side note, independently of your actual problem: column-count has nothing to do with the columns in table elements – it defines columns inside a div, for which you usually need to define a height on the parent element. In your case, the parent element only contains ONE child, i.e. the table, so column-count has no effect at all here. – Johannes Commented Mar 31 at 12:53
As said, applying columns on the outer div, doesn't make too much sense to begin with here. Try this instead, this shoud give you a similar result in Firefox as well: table, tbody, tr { display: block; } tbody { column-count: 2; } (and no column-count on anything else.) – C3roe Commented Mar 31 at 13:21
C3roe: If I do what you said, it displays the table as if each address tr had only 1 td; i.e. I lose the table effect of the first td being one column and the second td being a second column. Not an option. If I do as you said but remove tr from the first statement, it gives the exact same result as my original code -- but still fails on FF. – oyvey Commented Mar 31 at 15:58

| Show 2 more comments

1 Answer 1

Sorted by: Reset to default 2

Use break-after and avoid or avoid-column as the value.

avoid is supported by Firefox although avoid-column is not.

The break-after CSS property sets how page, column, or region breaks should behave after a generated box.

#addresses {
  column-count: 2;
}

.neighborhood {
  break-after: avoid;
}

<div id="addresses">
  <table>
    <tbody>
      <tr class="neighborhood">
        <td colspan="2">A:</td>
      </tr>
      <tr class="address">
        <td>1 Street</td>
        <td>Smith</td>
      </tr>
      <tr class="address">
        <td>2 Street</td>
        <td>Jones</td>
      </tr>
      <tr class="address">
        <td>3 Street</td>
        <td>Smith</td>
      </tr>
      <tr class="address">
        <td>4 Street</td>
        <td>Jones</td>
      </tr>
      <tr class="address">
        <td>5 Street</td>
        <td>Smith</td>
      </tr>
      <tr class="address">
        <td>6 Street</td>
        <td>Jones</td>
      </tr>
      <tr class="address">
        <td>7 Street</td>
        <td>Smith</td>
      </tr>
      <tr class="address">
        <td>8 Street</td>
        <td>Jones</td>
      </tr>
      <tr class="address">
        <td>9 Street</td>
        <td>Smith</td>
      </tr>
      <tr class="address">
        <td>10 Street</td>
        <td>Jones</td>
      </tr>
      <tr class="address">
        <td>11 Street</td>
        <td>Smith</td>
      </tr>
      <tr class="neighborhood">
        <td colspan="2">B:</td>
      </tr>
      <tr class="address">
        <td>12 Street</td>
        <td>Jones</td>
      </tr>
      <tr class="address">
        <td>13 Street</td>
        <td>Smith</td>
      </tr>
      <tr class="address">
        <td>14 Street</td>
        <td>Jones</td>
      </tr>
      <tr class="address">
        <td>15 Street</td>
        <td>Smith</td>
      </tr>
      <tr class="neighborhood">
        <td colspan="2">C:</td>
      </tr>
      <tr class="address">
        <td>16 Street</td>
        <td>Jones</td>
      </tr>
      <tr class="address">
        <td>17 Street</td>
        <td>Smith</td>
      </tr>
      <tr class="address">
        <td>18 Street</td>
        <td>Jones</td>
      </tr>
      <tr class="address">
        <td>19 Street</td>
        <td>Smith</td>
      </tr>
      <tr class="address">
        <td>20 Street</td>
        <td>Jones</td>
      </tr>
      <tr class="address">
        <td>21 Street</td>
        <td>Smith</td>
      </tr>
      <tr class="address">
        <td>22 Street</td>
        <td>Jones</td>
      </tr>
      <tr class="address">
        <td>23 Street</td>
        <td>Smith</td>
      </tr>
    </tbody>
  </table>
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How to prevent column break between 2 tr elements? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)