时间戳

首页 > 解决方案 > 在表头中使用 flex 的正确方法是什么？

html - 在表头中使用 flex 的正确方法是什么？

问题描述

在下表中，我要求在标签中查看它们的内容

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 10px;
    border: 1px solid #ddd;
}
<table>
    <thead>
        <tr>
            <th><span>Col 1</span>^</th>
            <th><span>Col 2</span>^</th>
            <th><span>Col 3</span>^</th>
            <th><span>Col 4</span>^</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
    </tbody>
</table>

尝试使用 flex 执行此操作时，出现意外行为

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 10px;
    border: 1px solid #ddd;
}

/* here is the change */
th {
  display: flex;
  justify-content: space-between;
}
<table>
    <thead>
        <tr>
            <th><span>Column 1</span>^</th>
            <th><span>Column 2</span>^</th>
            <th><span>Column 3</span>^</th>
            <th><span>Column 4</span>^</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
    </tbody>
</table>

获得了预期的结果，但标题失去了位置

在表头中使用 flex 的正确方法是什么？

标签： htmlcss

解决方案

给予thdisplay:flex将使其失去其表结构，因为默认情况下所有th都如此变化，不推荐display: table-cell;

这就是你的意思？

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 10px;
  border: 1px solid #ddd;
}
.d-flex{display:flex;}
.ml-auto{margin-left:auto;}
<table>
  <thead>
    <tr>
      <th>
        <div class="d-flex">Column 1
          <div class="ml-auto">^</div>
        </div>
      </th>
      <th>
        <div class="d-flex">Column 1
          <div class="ml-auto">^</div>
        </div>
      </th>
      <th>
        <div class="d-flex">Column 1
          <div class="ml-auto">^</div>
        </div>
      </th>
      <th>
        <div class="d-flex">Column 1
          <div class="ml-auto">^</div>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
      <td>Item 4</td>
    </tr>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
      <td>Item 4</td>
    </tr>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
      <td>Item 4</td>
    </tr>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
      <td>Item 4</td>
    </tr>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
      <td>Item 4</td>
    </tr>
  </tbody>
</table>

推荐阅读