只有css怎么把表头定位在表体左边

wqsoz72f 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(230)

enter image description here您好，如何才能获得这种效果，其中th和td似乎在一行中？

@media (max-width:360px){
    thead {
        float: left
    }
    th{
        display: block;
    }
    tbody {
        float: right
    }
    td{
        margin: 0px;
        display: block;
    }
}

<table>
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>James</td>
        <td>Matman</td>
        <td>Chief Sandwich Eater</td>
    </tr>
    <tr>
        <td>Jon</td>
        <td>Doe</td>
        <td>Chief Executive Eater</td>
    </tr>
    </tbody>
</table>

这是我目前的尝试，但它远远没有接近我需要的结果

css

来源：https://stackoverflow.com/questions/75334622/how-can-i-position-the-table-head-on-the-left-of-table-body-with-css-only

1条答案

按热度按时间

juzqafwq1#

你想要的只能通过重复tr和th来完成，这会使代码越来越长。下面是你的例子。
如果您不希望四周都有边框，可以使用：下边框、上边框。

tr {
  display: inline-flex;
  flex-direction: column;
  }
  td , th{
    padding: 5px;
     border: 1px solid black; 
  }

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

您应该使用Smarty和Twig模板检查它是如何完成的。
聪明：

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    {foreach from=$data item=row}
      <tr>
        <td>{$row.col1}</td>
        <td>{$row.col2}</td>
      </tr>
    {/foreach}
  </tbody>
</table>

小枝：用于或用于每一个。

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    {% for row in data %}
      <tr>
        <td>{{ row.col1 }}</td>
        <td>{{ row.col2 }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

赞(0）回复(0）举报 2023-02-06

我来回答

只有css怎么把表头定位在表体左边

1条答案

相关问题

热门标签

最新问答