Busca Resultado

testet

<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">
                        <img class="columnImage" src="http://placekitten.com/g/480/300" style="max-width:280px;" width="280" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="leftColumnContent">
                        <h1>Left Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                        <img class="columnImage" src="http://placekitten.com/g/480/300" style="max-width:280px;" width="280" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="rightColumnContent">
                        <h1>Right Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

...

0 comentários

tabela

By welligan

<title>Responsive Tables</title>

<style>

.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
 * html .cf { zoom: 1; }
 *:first-child+html .cf { zoom: 1; }

body, h1, h2, h3 { margin: 0; font-size: 100%; font-weight: normal; }

code { padding: 0 .5em; background: #fff2b2; }

body { padding: 1.25em; font-family: 'Helvetica Neue', Arial, sans-serif; background: #eee; }

h1 { font-size: 2em; }
 h2 { font-size: 1.5em; }
 h1, h2 { margin: .5em 0; font-weight: bold; }

.rt { width: 100%; font-size: 0.75em;/*12*/ line-height: 1.25em;/*15*/ border-collapse: collapse; border-spacing: 0; }

.rt th,
 .rt td { margin: 0; padding: 0.4166em;/*10*/ vertical-align: top; border: 1px solid #babcbf; background: #fff; }
 .rt th { text-align: left; background: #fff2b2; }

@media only screen and (max-width: 40em) { /*640*/

#rt1 { display: block; position: relative; width: 100%; }
  #rt1 thead { display: block; float: left; }
  #rt1 tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
  #rt1 thead tr { display: block; }
  #rt1 th { display: block; }
  #rt1 tbody tr { display: inline-block; vertical-align: top; }
  #rt1 td { display: block; min-height: 1.25em; }

#rt2 { display: block; position: relative; width: 100%; }
  #rt2 thead { display: block; float: left; }
  #rt2 tbody { display: -webkit-box; overflow-x: auto; }
  #rt2 th,
  #rt2 tr,
  #rt2 td { display: block; }

/* sort out borders */

.rt th { border-bottom: 0; }
  .rt td { border-left: 0; border-right: 0; border-bottom: 0; }
  .rt tbody tr { border-right: 1px solid #babcbf; }
  .rt th:last-child,
  .rt td:last-child { border-bottom: 1px solid #babcbf; }

}

</style>

<body>

<h1>
Responsive Tables (2)</h1>
<strong>Introduction:</strong> <a href="http://dbushell.com/2012/01/05/responsive-tables-2">Responsive Tables</a> — 5th January, 2012.<br />

The following tables change orientation on small screens. A horizontal scroll or swipe is used to view more data. The table head is always visible.<br />

<table class="rt cf" id="rt1">
  <thead class="cf">
<tr>
    <th>Dia</th>
    <th>Evento/Bloco/Atrações</th>
    <th>Horário</th>
    <th>Saída</th>
    
   </tr>
</thead>
  <tbody>
<tr>
    <td>03/02/2015</td>
    <td>Beijinho Doce - Participação Balé Popular Bom Jardim</td>
    <td>21h30 às 23h30</td>
    <td>Rua Manoel Augusto</td>
    
   </tr>
<tr>
    <td>06/02/2015</td>
    <td>Feira Cultural - Desfile das Musas dos Blocos</td>
    <td>20h00 às 23h00</td>
    <td>Pátio de Eventos</td>
    
   </tr>
<tr>
    <td>07/02/2015</td>
    <td>Bloco Lírico Batutas de Bom Jardim</td>
    <td>18h30 às 20h00</td>
    <td>Clube Varonil</td>
   
   </tr>
<tr>
    <td>07/02/2015</td>
    <td>Baile Municipal - Ed Carlos (EMPETUR), Valda Sedícias e Octeto Orquestra</td>
    <td>20h00 às 02h00</td>
    <td>Quadra Oswaldo Lima</td>
    
   </tr>
<tr>
    <td>08/02/2015</td>
    <td>Bloco Frango da Madrugada - Banda Reluz - Participação Balé Popular Bom Jardim</td>
    <td>15h00 às 19h00</td>
    <td>Rua Tabelião Manuel Arnóbio Souto Maior</td>
   
   </tr>
<tr>
    <td>4</td>
    <td>no</td>
    <td>no</td>
    <td>yes</td>
    <td>-moz-</td>
    <td>-moz-</td>
    <td>yes</td>
    <td>yes</td>
    <td>yes</td>
   </tr>
<tr>
    <td>5</td>
    <td>no</td>
    <td>no</td>
    <td>yes</td>
    <td>-moz-</td>
    <td>-moz-</td>
    <td>yes</td>
    <td>yes</td>
    <td>yes</td>
   </tr>
<tr>
    <td>6</td>
    <td>no</td>
    <td>no</td>
    <td>yes</td>
    <td>-moz-</td>
    <td>-moz-</td>
    <td>yes</td>
    <td>yes</td>
    <td>yes</td>
   </tr>
</tbody>
 </table>
</body>

Responsive Tables Responsive Tables (2) Introduction: Responsive Tables — 5th January, 2012. The following tables change ...

0 comentários

Busca Resultado

testet

tabela

dilma

Jogo

Bem Vindo