Question

我正在尝试将表行分成两半，并在经过如此多的列后进行堆栈，但是如何使用CSS做到这一点？

我尝试使用td：nth-child（12）和许多CSS尝试定位第12列。

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>

我希望能够定位第12列，然后将13-24列仅与CSS放在一行上。或者至少13-24表现得像新行一样。

Answer 1

您可以使用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>

Answer 2

您可以简单地使用flex-box。

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

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

这甚至可以用于更多的列/ tds。我为您制作了一个简单的Code-Pen：）

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

如何在'x'列数后拆分HTML表？

2 个答案: