CODEWITHSUNDEEP
htmlcsshtml-table
js-learner
js-learner

Reputation: 507

How I can split HTML table after 'x' number of columns?

I'm trying to get a table row to split in half and stack after so many columns, but how can I do this with CSS?

I have tried to target the 12th column using td:nth-child(12), and a number of css attempts.

td:nth-child(12) { white-space: nowrap; }
<table>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    </tr>
</table>

I expect to be able to target the 12th column, then put the columns 13-24 on a row with CSS only. Or at least so 13-24 behave like a new row.

Upvotes: 2

Views: 3227

Answers (2)

Kani
Kani

Reputation: 101

you could simply use flex-box.

tr {
    display: flex;
    flex-wrap: wrap;
}

td {
    flex: calc(100% / 13);
}

This would also work with even more columns/tds. I've made a simply Code-Pen for you :)

https://codepen.io/anon/pen/yWYzdr

Upvotes: 3

Nisharg Shah
Nisharg Shah

Reputation: 19542

You can do like that, using CSS grid

table tr {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
<table>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    </tr>
</table>

Upvotes: 4

Related Questions