Я хочу, чтобы заголовки столбцов в 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

Использование 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> 

EDIT: Пример CSS

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

Answer 2

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

Результат