如何将两个 <td> 元素放入一个 CSS 网格单元格中

Question

我正在构建一个 Web 应用程序并第一次认真尝试 CSS 网格（没有使用像 Bootstrap 这样的 CSS 框架）。在我的应用程序的各个地方，以良好的老式 table 呈现表格数据是有意义的，至少当视口足够大时，例如在桌面浏览器中。例如，像这样：

对于移动浏览器，表格视图的意义不大，相反，我想获取相同的数据并将其呈现在更多全屏宽度的卡片列表中，如下所示：

我没有与底层 HTML 结婚，因为它是基于 <table> 的，但出于语义和可访问性目的，以这种方式构建页面对我来说很有意义。

<table class="data-list">
    <thead>
        <tr>
            <th>Day</th>
            <th>Date</th>
            <th>Time</th>
            <th>Event</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Friday</td>
            <td>October 23</td>
            <td>8:00pm</td>
            <td>Event A</td>
        </tr>
        <tr>
            <td>Saturday</td>
            <td>October 24</td>
            <td>10:00am</td>
            <td>Event B</td>
        </tr>
    </tbody>
</table>

最终，我希望能够仅基于媒体查询将不同的 CSS 应用到相同的底层 html 以实现这种不同的视觉呈现.

目前我试过的移动（卡片）布局CSS如下：

table.data-list {
    display: grid;
    border-collapse: collapse;
    min-width: 100%;
    grid-template-columns: min-content min-content max-content 1fr;

    thead {
        display: none;
    }

    tbody,
    tr {
        display: contents;
    }

    row-gap: var(--grid-work-row-spacing);

    tr td {
        background-color: var(--cs-secondary-md);
        color: var(--cs-white-ish);
    }

    td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: var(--grid-work-table-vertical-padding) var(--grid-work-table-horizontal-padding);
        font-size: var(--grid-work-row-label-height);
    }

    tr td:nth-child(1) {
        grid-column: 1/3;
    }

    tr td:nth-child(2) {
        grid-column: 1/3;
    }

    tr td:nth-child(3) {
        grid-column: 3/4;
    }

    tr td:nth-child(4) {
        grid-column: 4/5;
    }
}

请特别注意，我希望将第一个和第二个 table 数据项拉入一个共享单元格（跨越两列），每个 tr td:nth-child(1) 和 grid-column: 1/3; 和tr td:nth-child(2)。这没有用，而是将第二、第三和第四个数据项流到新的网格行，如下所示：

问题：是否可以使用 CSS 将两个 td 元素拉入单个 CSS 网格单元格（如果可以，如何）？

可运行示例： https://codepen.io/joelbrown/pen/LYZxXEx

Answer 1

Question: Is it possible using CSS to pull two td elements into a single CSS grid cell (and if so, how)?

您可以部分打破 table-layout，将前两个 td 变成 block。

(grid和contentsdisplay这里好像没必要)

table {
  border-spacing: 0 0.2em;
  margin: 1em;
}

thead tr {
  background: #03337f;
  color: white;
}

tbody tr:nth-child(even) {
  background: gray;
}

td {
  padding: 0.25em;
}

@media screen and (max-width: 800px) {

  table {
    color: white;
  }
  table tr:nth-child(1n) {
    background: #000099;
  }
  /* break the table-layout from here */
  table tbody tr :nth-child(1),
  table tbody tr :nth-child(2) {
    display: block;
  }
  table tr :nth-child(2) {
    font-size: 0.65em;
  }
  /* not sure what you want about the thead td */
  table thead tr :nth-child(1),
  table thead tr :nth-child(2) {
    float: left;/* kills table-layout too */
    /*or  opacity:0; maybe ? */
    font-size: 0.01em;
  }
  table thead tr :nth-child(2) {
    font-size: 1rem;
  }
}

<table class="data-list">
  <thead>
    <tr>
      <th>Day</th>
      <th>Date</th>
      <th>Time</th>
      <th>Event</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Friday</td>
      <td>October 23</td>
      <td>8:00pm</td>
      <td>Event A</td>
    </tr>
    <tr>
      <td>Saturday</td>
      <td>October 24</td>
      <td>10:00am</td>
      <td>Event B</td>
    </tr>
  </tbody>
</table>

Answer 2

一旦您将 display: grid; 应用于 table 标签，table 就会失去其 display: table 属性，并且整个布局将不会充当 table 了，但作为一个网格。所以你必须决定：将其视为 table 或将其视为网格 - 并根据该决定调整 CSS 的其余部分。

如何将两个 <td> 元素放入一个 CSS 网格单元格中

How to place two <td> elements into a single CSS grid cell

css

responsive-design

css-grid