是否可以使用CSS垂直显示表格行？

Question

我有这样一张桌子:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone no.</th>
      <th>Address</th>
      <th>Wealth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>John Doe</th>
      <td>00123456789</td>
      <td>Morgue St. 21</td>
      <td>$100,000</td>
    </tr><tr>
      <th>Mary Sue</th>
      <td>00987654321</td>
      <td>Impossible St. 12</td>
      <td>$999,999,999,999,999</td>
    </tr><tr>
      <th>Cpt. Kirk</th>
      <td>00999999999</td>
      <td>Enterprise St. 22</td>
      <td>$100,000,000</td>
    </tr>
  </tbody>
</table>

嗯,这张桌很宽.现在我必须制作一个样式表,使网站适合在狭窄的屏幕上观看,如手机.所以我必须做这个宽桌子.

我在想这张桌子是否可以垂直显示,而不是水平显示.更具体地说,我在想它是否可以显示更像这样:

<ul>
  <li><strong>John Doe:</strong>
    <ul>
      <li><em>Phone no.:</em> 00123456789</li>
      <li><em>Address:</em> Morgue St. 21</li>
      <li><em>Wealth:</em> $100,000</li>
    </ul>
  </li><li><strong>Mary Sue:</strong>
    <ul>
      <li><em>Phone no.:</em> 00987654321</li>
      <li><em>Address:</em> Impossible St. 12</li>
      <li><em>Wealth:</em> $999,999,999,999,999</li>
    </ul>
  </li><li><strong>Cpt. Kirk:</strong>
    <ul>
      <li><em>Phone no.:</em> 00999999999</li>
      <li><em>Address:</em> Enterprise St. 22</li>
      <li><em>Wealth:</em> $100,000,000 </li>
    </ul>
  </li>
</ul>

现在,我肯定可以创建一个Javascript,将表格代码从第一个代码段转换为第二个代码段中的列表代码.但我想知道,如果有必要吗？是否有可能制作一个CSS样式表,当从第一个代码段附加到表代码时会使它看起来像第二个片段？

Answer 1

当然,你可以玩media queries和改变display的table:

看到这个小提琴

@media(max-width: 640px){
  table, table td, table tr, table th { display: block; text-align: left; } 
  table th, table td { margin: 0; padding-left: 25px;  }
  table td  { margin-left: 40px;list-style: square; display: list-item; padding-left: 0; }
  table thead { display: none; }
}

Answer 2

td, th {
  text-align: left;
  display: block;
  float: left;
  width: 100%;
}

thead {
  display: none;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone no.</th>
      <th>Address</th>
      <th>Wealth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>John Doe</th>
      <td>00123456789</td>
      <td>Morgue St. 21</td>
      <td>$100,000</td>
    </tr><tr>
      <th>Mary Sue</th>
      <td>00987654321</td>
      <td>Impossible St. 12</td>
      <td>$999,999,999,999,999</td>
    </tr><tr>
      <th>Cpt. Kirk</th>
      <td>00999999999</td>
      <td>Enterprise St. 22</td>
      <td>$100,000,000</td>
    </tr>
  </tbody>
</table>

这是一种没有<thead>元素的可能方法，但您可以在每个人之前创建隐藏元素，例如<span class="hidden">Name:</span> Cpt. Kirk，然后使用媒体查询启用所有隐藏元素。这不是最优雅的解决方案，我可能更喜欢 JS。