HTML:tbody列先看thead列顺序再显示

Question

我在使用 HTML 表格时遇到了一些问题。

下面我有一个表结构。

<table>
    <caption>Movie Details</caption>
    <thead>
        <tr>
            <th axis="m" header="movie">Movie Name</th>
            <th axis="g" header="genre"> Genre</th>
        </tr>
    </thead>
    <!-- note: rows generates dynamically using loop -->
    <tbody>
        <tr>
            <td axis="m">Aanjana Anjani</td>
            <td axis="g">Romance</td>
        </tr>
        <tr>
            <td axis="m">Bodyguard</td>
            <td axis="g">Romance</td>
        </tr>
        <tr>
            <td axis="m">Gajini</td>
            <td axis="g">Action</td>
        </tr>
        <tr>
            <td axis="m">Singham</td>
            <td axis="g">Action</td>
        </tr>
    </tbody>
</table>

目前这个表是按电影名排序，现在

Is there any way that, if I swap the column in <thead> then <tbody>, data is swapped automatically (means tbody looking to thead and then display ) using only HTML?

意味着如果我更改列顺序(genre 现在是第一列)，

<th axis="g" header="genre"> Genre</th>
<th axis="m" header="movie">Movie Name</th>

然后是 <tbody> 每一行的列应该改变。

我认为 axis和 headers attributes 可能对此有所帮助，但无法获得准确的信息。

Reference for axis in headers .

Answer 1

如果您愿意考虑(只是一点点)CSS，您可以。在下面的示例中，您只需交换 CSS 类的名称即可“切换列”。 (即，将 .right 更改为 .left，将 .left 更改为 .right)。您不必对表格本身中的 HTML 进行任何更改。

<style type="text/css">
   .right {width:100px; float:right;}
   .left {width:100px; float:left;}
</style>

<table>
   <thead>
      <tr>
         <td width="250px">
            <div class="right">LEFT</div>
            <div class="left">RIGHT</div>
         </td>
      </tr>
   </thead>
   <tr>
      <td width="250px">
         <div class="right">L Data</div>
         <div class="left">R Data</div>
      </td>
   </tr>
</table>