欲被印刷在一個HTML表中的列標題垂直

我想要這個表欲被印刷在一個HTML表中的列標題垂直

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>

我應該如何修改上面的代碼來獲得輸出？

來源

2012-12-03 Ezhil

使用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 }

來源

2012-12-03 08:28:35 toxalot

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

來源

2012-12-03 06:39:03

我喜歡這個問題，我不就沒有辦法通過css來使它..你可以通過更新acheive它的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>

來源

2012-12-03 06:41:32

這其實是很容易與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; } 
    }

結果

enter image description here

來源

2014-08-05 18:31:23 tomasz86

欲被印刷在一個HTML表中的列標題垂直

回答

相關問題