我希望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值为包含它的列的其余部分提供标题信息。

Read more about the scope attribute.

<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; }
  }

<强>结果