html - 我希望 HTML 表格中的列标题垂直打印

Question

我想要这张桌子

id     name       country
--     -------    -------

1       John        America
2       Smith        Mexico
3       Khan        India 

像这样打印

id            1             2           3
name        John          Smith       Khan
country     America       Mexico      India

在 HTML 中。

<table>
<tr>
<th>id</th>
<th>name</th>
<th>country</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>America</td>
</tr>

我应该如何修改上面的代码以获得该输出？

Answer 1

     <table>
     <tr>
     <th>id</th><td>1</td>
     </tr>
     <tr>
     <th>name</th><td>John</td>
     </tr>
     <tr>
     <th>country</th><td>America</td>
     </tr>
     </table>

Answer 2

用于th标题，无论它们是水平还是垂直运行。您可以在同一个表中同时拥有行标题和列标题。您还可以添加可选scope属性以提高可访问性，为您提供一个钩子，以便您可以使用 CSS 为它们设置不同的样式，并为可维护性明确含义。

该scope属性指定当前标题单元格为其提供标题信息的一组数据单元格。该row值提供包含它的行的其余部分的标题信息。该col值为包含它的列的其余部分提供标题信息。

阅读有关范围属性的更多信息。

<table>
    <tr>
        <th scope="row">id</th>
        <th scope="col">1</th>
        <th scope="col">2</th>
        <th scope="col">3</th>
    </tr>
    <tr>
       <th scope="row">name</th>
       <td>John</td>
       <td>Smith</td>
       <td>Khan</td>
    </tr>
    <tr>
        <th scope="row">country</th>
        <td>America</td>
        <td>Mexico</td>
        <td>India</td>
    </tr>
</table>

编辑：示例 CSS

th[scope=row] { color: green }
th[scope=col] { color: blue }

Answer 3

我喜欢这个问题，我没有办法通过 css 来解决它。你可以通过更新你的 html 代码来实现它

<table>
    <tr>
        <th>id</th>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
       <th>name</th>
       <td>John</td>
       <td>Akhil</td>
       <td>Sas</td>
    </tr>
        <th>country</th>
        <td>America</td>
        <td>India</td>
        <td>Canada</td>
    </tr>
</table>

Answer 4

这实际上使用 CSS 很容易。

HTML

<table>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>country</th>
    </tr>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>America</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Smith</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Khan</td>
      <td>India</td>
    </tr>
</table>

CSS

@media print {
  tr { display: inline-block; }
  th, td { display: block; }
  }

结果