将html表格格式化为css-grid

由 发布于 csshtml-tablecss-grid
 收藏

我有一个宽的html表，我想通过使用纯css样式将其显示为较小的屏幕宽度。

this is the unstyled table enter image description here (the cells are overwide and full of content, this is just an abstract example)

this is the desired outcome my goal

每行应为一个块，表单元格按html源中的相同顺序彼此堆叠。然后，应将这些块布置在网格中，以便在屏幕宽度允许的情况下，彼此相邻的块数尽可能多。

最小的例子

div {
  color: grey;
  border: 1px solid blue;
  width: 600px;
}

body {
  padding: 20px;
  font-family: Helvetica;
}

.box {
  background-color: black;
  color: #fff;

  padding: 10px;
  padding-right: 150px;
  font-size: 14px;
}

/*makes desired blocks*/
.wrapper td {
  display: block;
}

.wrapper td:last-child {
  margin-bottom: 10px;
}
<div>

<table class="wrapper">
  <tr>
    <td class="box a">A1</td>
    <td class="box b">B1</td>
    <td class="box c">C1</td>
    <td class="box d">D1</td>
    <td class="box e">E1</td>
    <td class="box f">F1</td>
  </tr>
  <tr>
    <td class="box a">A2</td>
    <td class="box b">B2</td>
    <td class="box c">C2</td>
    <td class="box d">D2</td>
    <td class="box e">E2</td>
    <td class="box f">F2</td>
  </tr>
  <tr>
    <td class="box a">A3</td>
    <td class="box b">B3</td>
    <td class="box c">C3</td>
    <td class="box d">D3</td>
    <td class="box e">E3</td>
    <td class="box f">F3</td>
  </tr>
    <tr>
    <td class="box a">A4</td>
    <td class="box b">B4</td>
    <td class="box c">C4</td>
    <td class="box d">D4</td>
    <td class="box e">E4</td>
    <td class="box f">F4</td>
  </tr>
</table>
</div>

这确实给了我想要的障碍。但是到目前为止，我未能将元素排列在css网格中。

这是我尝试过的CSS的示例：

    .wrapper {
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(300px, auto);
}

This does work on nested divs as expected (js Fiddle )

我认为这可能与不允许将表格布局为网格有关。

不过，我想避免从数据中制作div表，因为从语义上讲，它是一个表，而且我听说这样做对屏幕教学者更好。

I also tried the various css placement algorithms I looked at the mozilla examples and tried applying them. Also I messed around with setting display:contents for td and tr selectevly

评论
深海里的鱼
深海里的鱼

You can use the flex model, but do not forget that tbody will be there even if not in the HTML code :

可能的示例从以下开始：

div {
  color: grey;
  border: 1px solid blue;
  width: 600px;
}

body {
  padding: 20px;
  font-family: Helvetica;
}

.box {
  background-color: black;
  color: #fff;
  padding: 10px;
  padding-right: 150px;
  font-size: 14px;
}


/*makes desired blocks*/

.wrapper td {
  display: block;
}

.wrapper td:last-child {
  margin-bottom: 10px;
}

/* DEMO UPDATE */

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

tr {
  margin: 5px 10px 0;
}
<div>

  <table class="wrapper">
    <tr>
      <td class="box a">A1</td>
      <td class="box b">B1</td>
      <td class="box c">C1</td>
      <td class="box d">D1</td>
      <td class="box e">E1</td>
      <td class="box f">F1</td>
    </tr>
    <tr>
      <td class="box a">A2</td>
      <td class="box b">B2</td>
      <td class="box c">C2</td>
      <td class="box d">D2</td>
      <td class="box e">E2</td>
      <td class="box f">F2</td>
    </tr>
    <tr>
      <td class="box a">A3</td>
      <td class="box b">B3</td>
      <td class="box c">C3</td>
      <td class="box d">D3</td>
      <td class="box e">E3</td>
      <td class="box f">F3</td>
    </tr>
    <tr>
      <td class="box a">A4</td>
      <td class="box b">B4</td>
      <td class="box c">C4</td>
      <td class="box d">D4</td>
      <td class="box e">E4</td>
      <td class="box f">F4</td>
    </tr>
  </table>
</div>
点赞
评论