主页 / coding / 问题 / 76922304
Accepted
puntable
Asked: 2023-08-17 22:05:53 +0800 CST

HTML 表格，一行中有 2 行单元格

  • 772

我正在使用 HTML 表格，想知道是否可以使用屏幕截图中所示的布局？

我知道我可以使用 来做到这一点<div>，但更愿意保留表格格式。

HTML表格

html

2 个回答

  1. 表格单元格不会换行，因此您需要一个新行。在该行中，表格单元格将跨越其他列。

    表格用于呈现表格数据（相关的行和列）。如果这不是您的目的（例如布局），那么最好使用不同的方法。Flexbox 或网格可以很好地工作，具体取决于用例。

    td {
  border: 1px solid;
  text-align: center;
  padding: .25em;
}
    <table>
  <caption>Caption should be included for accessibility</caption>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td colspan="4">Spans all 4 columns</td>
    </tr>
  </tbody>
<table>

    • 1
  2. Best Answer

    这正是您想要的。请记住，通常这不是您构建 html 的方式（将表格单元格移至下一行）。

    *{
    margin: 0;
    padding: 0;
}

table{
    width: 100%;
    border: 1px solid red;
    padding: 5px;
}

tr{
    border: 1px solid blue;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

td{
    height: 50px;
    flex-basis: 24%;
    border: 1px solid green;
    margin: 5px;
    box-sizing: border-box;
}

td:last-child{
    flex-basis: 100%;
}
    <table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

    • 1

相关问题