Skip to main content
adicionou 13 caracteres ao conteúdo
Fonte Link
fernandosavio
  • 9,3mil
  • 20
  • 41

Esta resposta do SOEN usamusa um hack bem interessante.

Dessa maneira a <div> gira 180° e a tabela gira 360° pois está contida na <div>.

Segue um exemplo:

Esta resposta do SOEN usam um hack bem interessante.

Dessa maneira a <div> gira 180° e a tabela gira 360° pois está contida na <div>.

Esta resposta do SOEN usa um hack bem interessante.

Dessa maneira a <div> gira 180° e a tabela gira 360° pois está contida na <div>.

Segue um exemplo:

Fonte Link
fernandosavio
  • 9,3mil
  • 20
  • 41

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>