html - 如何在“x”列数之后拆分 HTML 表格？

Question

我试图让一个表格行分成两半并在这么多列之后堆叠，但我怎么能用 CSS 做到这一点？

我尝试使用 td:nth-child(12) 定位第 12 列，并尝试了一些 css。

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 表现得像一个新行。

标签： htmlcsshtml-table

Answer 1

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

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

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

这也适用于更多的列/tds。我为你做了一个简单的代码笔:)

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