table HTML、CSS 中的网格

Question

我需要帮助，我有一份文档需要在 HTML CSS 中生成，然后将其转换为 PDF。

我有一个 table 要做，方法是输入如下信息（颜色不重要）：

我们可以将网格直接放在标签中吗，也许是那样？

// example
<td class="grid">
  <p>
   ...text
  </p>
</tp>

我尝试了不同的方法，但我无法得到我想要的结果。

Answer 1

这将在一行中应用 2 列

将.grid-container添加到td,

and col1 and col2 to each P under the container

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "col1 col2";
}

.col1 { grid-area: col1; }

.col2 { grid-area: col2; }

<div class="grid-container">
  <div class="col1"></div>
  <div class="col2"></div>
</div>

table HTML、CSS 中的网格

Grid in table HTML, CSS

html

css

pdf

grid