Question

我有一张这样的表

<table>
    <thead>
        <tr>
            <th>Numbers</th>
            <th>Alphabet</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>a</td>
        </tr>
        <tr>
            <td>2</td>
            <td>b</td>
        </tr>
    </tbody>
</table>

通常情况下，第一列会显示Number 1 2（从上到下），第二列会显示Alphabet a b

现在，我想将<thead>转换为垂直，将<tbody> <tr>转换为垂直，以便Number 1 2位于水平线，Alphabet a b位于另一水平线一。

CSS

thead {
    float: left;   
}

thead th {
    display: block;   
}

tbody {
    float: right;   
}

thead变为垂直，但tbody tr不变。

有谁知道如何让它发挥作用？致谢

Answer 1

不确定为什么不改变表格布局，但我猜你有理由。无论如何，这不是一件容易的事情：）

这是CSS代码

table{
     display:block;
     padding: 0px;
     border-collapse:collapse;
     border-spacing:0;
     margin-top: 0px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: auto;
}
thead{
    display: block;
    float: left;
    margin: 0px;
    padding: 0px;
    width: 100px;
}
tbody{
    margin: 0px;
    padding: 0px;
}
tbody tr {
    float:left;
}
th, td{
   display:block;
   padding: 5px;
   margin: 0px;
}
thead > tr th:nth-child(odd) { 
       display:block; 
       float:left;
}
thead > tr th:nth-child(even) { 
   display:block;
   float:left; 
}
tbody > tr td:nth-child(odd) {
   display:block;
}
tbody > tr td:nth-child(even) { 
   display:block; 
   float:right;
}

这是带有HTML表格结构的演示： http://jsfiddle.net/darkosss/83kVc/

希望这有帮助

Answer 2

如果您的表格不会动态变化，为什么不使用这种结构。

  <table>
     <tr>
        <th>Numbers</th>
        <td>1</td>
        <td>1</td>
     </tr>
     <tr>
        <th>Alphabet</th>
        <td>a</td>
        <td>a</td>
     </tr>
  </table>

Answer 3

我的朋友，在这种情况下，不要使用thead和tbody。这样做，

<table>
  <tr>
    <th>Numbers</th>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <th>Alphabet</th>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

转换表垂直标题

3 个答案: