Esta resposta do SOEN usam um hack bem interessante.
O hack consiste em ter uma <div>
envolvendo a tabela, então basta usar CSS Rotate para girar a <div>
em 180° e também girar a tabela em 180°.
Dessa maneira a <div>
gira 180° e a tabela gira 360° pois está contida na <div>
.
/* Estilização da tabela */
table {
border-collapse: collapse;
border: 1px solid #555;
}
table th,
table td{
border: 1px solid #888;
text-align: center;
}
/* Limita o tamanho da tabela para ter scroll */
.wrapper {
width: 300px;
overflow-x: auto;
}
/*
Gira a <div> e a <table> em 180°
ou seja, a div gira 180° e a
a table gira 360°
*/
.wrapper,
.content {
transform: rotate(180deg);
}
<div class="wrapper">
<table class="content">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
</tbody>
</table>
</div>