时间戳

首页 > 解决方案 > 如何在表格的 tr 下插入列表

html - 如何在表格的 tr 下插入列表

问题描述

我需要 atable并且还在表格的tr行下插入两行全长，我看到尝试完成的唯一方法是list在它下面放一个。我真的找不到任何关于这个的东西，我什至会很感激知道一些替代方法来完成这个。

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <ul>
    <li>Other data</li>
    <li>Other data two</li>
  </ul>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

标签： html

解决方案

如果您需要跨越整个表格宽度的行，请使用该行中元素的colspan属性：td

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td colspan="3">Other data</td>
  </tr>
  <tr>
    <td colspan="3">Other data two</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

如果您需要一个无序列表 ( ul)，请将其放入td：

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td colspan="3">
      <ul>
        <li>Other data</li>
        <li>Other data two</li>
      </ul>
    </td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

重要提示：这是对元素的明显误用，该table元素仅 用于显示表格数据。

推荐阅读