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

【问题标题】：How I can split HTML table after 'x' number of columns?如何在“x”列数之后拆分 HTML 表格？
【发布时间】：2019-05-09 01:16:10
【问题描述】：

我正在尝试将一个表格行分成两半并在这么多列之后堆叠，但是如何使用 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 列，然后仅使用 CSS 将第 13-24 列放在一行上。或者至少 13-24 表现得像一个新行。

【问题讨论】：

嗯，用<tr>s比较好，不过你也可以用table tr { display: grid; grid-template-columns: repeat(12, 1fr)}
回答后我会显示您的评论，很高兴您在评论部分回答
当然，如果您的表格列需要像这样换行，那么表格并没有真正显示表格数据（因为列标题不匹配而没有意义）因此您不应该真的在用桌子吗？
@elveti - 感谢您第一个回答并感谢您的帮助 :)
@Pete - 它在一个动态环境中，我们无法触及核心 HTML，为了尝试访问应用程序 src 代码，我费尽心思 - 我只是被告知这不是我的职权范围项目所有者 - 好吧 :(

标签： html css html-table

【解决方案1】：

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

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

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

这也适用于更多的列/tds。我为你做了一个简单的 Code-Pen :)

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

【讨论】：

【解决方案2】：

你可以这样做，使用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>

【讨论】：

这对我也有用@Nisharg，希望 stackoverflow 能让我有 2 个接受的 anwsers :)
上面的答案有一些小故障，因为它的底物值来自100% 并且结果在 point 所以从我的角度来看这是不可接受的答案，但很高兴你也喜欢我的答案，谢谢！！