将css网格布局中的表格行独立于其他行答案

【问题标题】：Turn a table row in a css grid layout independent from other rows将css网格布局中的表格行独立于其他行
【发布时间】：2019-10-16 15:12:10
【问题描述】：

我必须只使用 CSS 重新排列这样的表格。

<head>
<style>
table, th, td {border: 1px solid black; border-collapse: collapse; }
th, td {padding: 5px;}
th {text-align: left;}
</style>
</head>
<body>

<table>
    <tr>
        <th>H1</th>
	<th>H2</th>
	<th>H3</th>
        <th>H4</th>
	<th>H5</th>
	<th>H6</th>
	<th>H7</th>
	<th>H8</th>
	<th>H9</th>
	<th>H10</th>
    </tr>
    <tr>
	<td class="col-A1">A1</td>
        <td class="col-A2">A2</td>
	<td class="col-A3">A3</td>
	<td class="col-A4">A4</td>
	<td class="col-A5">A5</td>
	<td class="col-A6">A6</td>
	<td class="col-A7">A7</td>
	<td class="col-A8">A8</td>
	<td class="col-A9">A9</td>
	<td class="col-A10">A10</td>
    </tr>
    <tr>
	<td class="col-B1">B1</td>
	<td class="col-B2">B2</td>
	<td class="col-B3">B3</td>
	<td class="col-B4">B4</td>
        <td class="col-B5">B5</td>
	<td class="col-B6">B6</td>
	<td class="col-B7">B7</td>
	<td class="col-B8">B8</td>
	<td class="col-B9">B9</td>
	<td class="col-B10">B10</td>
    </tr>
</table>
</body>

我怎样才能得到这样的布局？我最初的想法是使用 CSS flexbox，但我不知道如何将行重新排列到这种布局中，尤其是 A2 到 A7 部分，其中有两列。

因此，正如 cmets 对原始帖子的建议，我会选择 CSS 网格布局。

【问题讨论】：

是否允许更改 HTML 结构？
不，我不是，只有 CSS。
这将是 CSS Grid 的一个很好的候选，但它肯定需要一些 HTML 更改来制作嵌套网格。我并不是说这是不可能的，但我想不出一个不需要更多容器用于“A”部分的 flexbox 解决方案。为什么不能编辑 HTML？是任务吗？如果是这样，这是一个艰难的。我想您绝对可以定位每个单独的单元格
我同意@RutherfordWonkington，它是一个理想的网格布局。如果没有绝对定位，在table 上获取此布局不是前进的方向。
这对于 css 表来说是不可能的，即使你重新排列行，因为 col-A9 和 col-A10 每个占据 2.5 列......使用 flexbox 你会发现困难 跨越行（例如col-A2）并且只有嵌套更多容器才能解决......但是使用css网格这实际上很容易......

标签： html css flexbox css-grid

【解决方案1】：

即使您重新排列行，tables 也无法做到这一点，因为 col-A9 和 col-A10 各占 2.5 列。而使用 flexbox 你会发现跨行的困难（例如col-A2），只有嵌套更多的容器才能解决。

但是使用 css 网格，这实际上很容易 - 您可以在此处使用 20 列布局。见演示内联解释：

.wrapper {
  display: grid; /* establish a grid container */
  grid-template-columns: repeat(20, 1fr); /* 20 columns */
  grid-auto-rows: 50px; /* row height for illustration */
}

.wrapper div {
  border: 1px solid;
  grid-column: span 2; /* span two columns */ 
  /* flexbox to center content*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .a {
  grid-column: span 10;  /* span ten columns */ 
}

.wrapper .a1 {
  grid-column: span 20; /* span all 20 columns */ 
}

.wrapper .a2 {
  grid-row: span 5; /* span five rows */ 
}

.wrapper .a9,.wrapper .a10{
  grid-column: span 5; /* span five columns */ 
}

<div class="wrapper">
  <div class="h">H1</div>
  <div class="h">H2</div>
  <div class="h">H3</div>
  <div class="h">H4</div>
  <div class="h">H5</div>
  <div class="h">H6</div>
  <div class="h">H7</div>
  <div class="h">H8</div>
  <div class="h">H9</div>
  <div class="h">H10</div>
  
  <div class="a a1">A1</div>
  <div class="a a2">A2</div>
  <div class="a a3">A3</div>
  <div class="a a4">A4</div>
  <div class="a a5">A5</div>
  <div class="a a6">A6</div>
  <div class="a a7">A7</div>
  <div class="a a8">A8</div>
  <div class="a a9">A9</div>
  <div class="a a10">A10</div>
  
  <div class="b">B1</div>
  <div class="b">B2</div>
  <div class="b">B3</div>
  <div class="b">B4</div>
  <div class="b">B5</div>
  <div class="b">B6</div>
  <div class="b">B7</div>
  <div class="b">B8</div>
  <div class="b">B9</div>
  <div class="b">B10</div>
  
</div>

【讨论】：