时间戳

首页 > 解决方案 > 表格标题和正文布局

html - 表格标题和正文布局

问题描述

我的表格标题和表格正文内容都以 html 形式输入，但表格正文的内容仅显示在网页上的一个标题上。如何解决此问题，以使正文内容位于正确的标题下？这是我的代码。

<thead>
  <th>Nursery</th>
  <th>Life Kids</th>
  <th>Thrive Youth</th>
  <th>Adult Bible Study</th>
</thead>
<tbody>
  <tr>
    <td>Ages 0-Preschool<br>Availiable during all services</td>
  </tr>
  <tr>
    <td>K-5th Grade<br>Sundays @10am & Wednesdays @6:30pm</td>
  </tr>
  <tr>
    <td>6th-12th Grade<br>Wednesdays @6:30pm</td>
  </tr>
  <tr>
    <td>Adults<br>Wednesdays @6:30pm</td>
  </tr>
</tbody>

标签： htmlcsshtml-table

解决方案

您的代码的固定版本：

<table>
<tr>
  <th>Nursery</th>
  <th>Life Kids</th>
  <th>Thrive Youth</th>
  <th>Adult Bible Study</th>
</tr>

  <tr>
    <td>Ages 0-Preschool<br>Availiable during all services</td>
    <td>K-5th Grade<br>Sundays @10am & Wednesdays @6:30pm</td>
    <td>6th-12th Grade<br>Wednesdays @6:30pm</td>
    <td>Adults<br>Wednesdays @6:30pm</td>
  </tr>
</table>

您可以使用以下 CSS 代码对其进行样式设置：

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

推荐阅读