css 表格 实现tbody 中td宽度 根据thead th宽度自适应、

可以使用CSS中的表格布局属性来实现，具体如下：

1. 设置表格布局属性：

table {
  table-layout: fixed;
  width: 100%;
}

2. 设置thead中的th宽度：

thead th {
  width: 25%;
}

3. 设置tbody中的td宽度：

tbody td {
  word-wrap: break-word;
}

其中，word-wrap: break-word;属性用于自动换行，防止内容溢出。

这样，tbody中的每个td宽度就会根据thead中对应的th宽度进行自适应了。完整代码如下：

table {
  table-layout: fixed;
  width: 100%;
}

thead th {
  width: 25%;
}

tbody td {
  word-wrap: break-word;
}

相关问题

html 设置table中th 宽度

在 HTML 中，可以使用 `width` 属性来设置表格中 `th` 单元格的宽度。具体方法如下：

<table>
  <thead>
    <tr>
      <th style="width: 100px;">列1</th>
      <th style="width: 200px;">列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

在 `th` 元素中，使用 `style` 属性来设置 `width` 属性，值为希望设置的宽度，可以使用像素（px）、百分比（%）或其他CSS长度单位。这里设置列1的宽度为100px，设置列2的宽度为200px，列3的宽度将会自适应。

注意：当表格的宽度小于所有 `th` 元素的宽度之和时，部分 `th` 元素的宽度可能会被压缩来适应表格宽度。

html中table自适应屏幕高度

在 HTML 中，可以使用如下代码来实现表格自适应屏幕高度：

<style>
table {
  height: 100%;
  width: 100%;
  table-layout: fixed;
}
tbody {
  display: block;
  height: calc(100% - 1em);
  overflow-y: scroll;
}
</style>

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <tr>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
    <!-- 其他行省略 -->
  </tbody>
</table>

首先，我们使用 CSS 中的 `height` 和 `width` 属性将表格宽度和高度设置为 100%。接着，使用 `table-layout: fixed;` 属性来让表格根据容器自适应宽度。这样，表格的宽度就可以根据屏幕大小自动适应。

接下来，我们为表格中的 tbody 标签设置 `display: block;` 属性，使其可以像块级元素一样显示。然后，使用 `height: calc(100% - 1em);` 将 tbody 的高度设置为屏幕高度减去 1em 的高度（em 是相对于字体大小设置的单位，1em 等于当前字体大小的值），这样就可以使 tbody 的高度自适应屏幕。最后，使用 `overflow-y: scroll;` 将 tbody 设置为纵向滚动。

这样，就可以实现表格自适应屏幕高度的效果。如果需要表格自动调整高度，请将tbody属性的overflow-y:scroll改为overflow-y: auto。