Question

我有这张桌子：

<table id="tabla">
    <tbody>
        <tr><th>row1</th><td>aaaa</td></tr>
        <tr><th>row2</th><td>bbbb</td></tr>
        <tr><th>row3</th><td>cccc</td></tr>
        <figure><img src="image.png"/></figure></td></tr>
    </tbody>
</table>

这会以行的形式组织信息......但我想将其旋转并在列中显示...我希望这足以解释我想要的内容：

我现在如何拥有它：

row1: aaaa
row2: bbbb
row3: cccc imag

我多么想要：

 row1 | row2 | row3
 aaaa | bbbb | cccc
             | imag

如何使用CSS执行此操作？

Answer 1

如果你只被迫使用CSS，你可以使用rotate：）

#table {
    transform:rotate(90deg);  
}
#table th, #table td{
    transform:rotate(-90deg);
}
td {
  height: 50px;
}

<table id="table">
    <tbody>
        <tr><th>row1</th><td>aaaa</td></tr>
        <tr><th>row2</th><td>bbbb</td><td>bbbb</td><td>bbbb</td></tr>
        <tr><th>row3</th><td>bbbb</td><td>bbbb</td><td>bbbb</td></tr>
    </tbody>
</table>

Answer 2

这可能不是您期望的解决方案，我真的鼓励您查看新的CSS Flexible Box模型，而不是使用HTML表格，因为它会让您在这些场景中的生活更轻松。 / p>

如果您有兴趣，请在Vertical Menu (+ Sub-Menu) stacks unnaturally查看我的答案，找出一个非常相似的问题。

Answer 3

在display: flex上使用tbody，并在表行上设置均分的flex-basis。

body {
  font-size: 20px;
  font-family: monospace;
}
table {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
tbody {
  display: flex;
  width: 800px;
  position: relative;
  align-items: stretch;
  border: 1px solid black;
  
}
tr {
  flex-basis: 33.33333333%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 5px 10px;
 
  
}
tr + tr {
border-left: 1px solid black;
}

th, td {
  flex-basis: 100%;
  text-align: left;
  display: flex;
  padding: 2px;
  
}
th {
  font-weight: bold;
}

<table id="tabla">
    <tbody>
        <tr>
          <th>row1</th>
          <td>aaaa</td>
        </tr>
        <tr>
          <th>row2</th>
          <td>bbbb</td>
        </tr>
        <tr>
          <th>row3</th>
          <td>cccc</td>
          <td>
            <figure>
              <img src="https://via.placeholder.com/150"/>
            </figure>
          </td>
        </tr>
    </tbody>
</table>

CodePen：https://codepen.io/jeffdaley/pen/WmgNRb?editors=1100

边界可能会给您带来一些麻烦，但这应该使您走上正确的轨道。

Answer 4

<table id="tabla">
    <tbody>
        <tr><th>row1</th><th>row2</th><th>row3</th></tr>
        <tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
        
    </tbody>
</table>

使用此

Answer 5

我想知道为什么每个人都在使这个问题复杂化。答案很简单明了，如果遵循正确格式的html表，您可能就不会遇到这个问题。

<table id="tabla">
   <thead>
       <th class="rb">row1</th>
       <th class="rb">row2</th>
       <th>row3</th>
   </thead>
   <tbody>
       <tr><td class="rb">aaaa</td><td class="rb">bbbb</td><td>cccc</td></tr>
       <tr><td colspan="2" class="rb"></td><td><figure><img src="image.png"/> 
           </figure></td></tr>
   </tbody>
 </table>


  .rb{
      border-right: 1px solid #ccc;
   }

那样简单而基本...

将方向更改为垂直，表格行HTML + CSS

5 个答案: