tabella e css

[Domenico Cafaro]

Salve Ragazzi, ho un problema con una tabella.
Devo farla diventare resposive ma non riesco.

ecco il codice:

<style type="text/css">
#intestazione {

text-align: center;
font-size: 12pt;

}

#foot {

text-align: right;
font-size: 11pt;
font-weight: 800;
color: #3498db;
}

#testo {

text-align: justify;
font-size: 10pt;
line-height: 20px;

}

#intro {


text-align: justify;
font-size: 10pt;
line-height: 20px;

}

#banner {

font-size: 14px;
color: #00000;
font-weight: 900;
}

#banner2 {

font-size: 14px;
color: #00000;

}

#picture {

width: 206px;
height: 137px;

}

</style>

<table class="table table-striped">
<tbody>
<tr><th id="intestazione" colspan="2"><a href="http://www.miosito.it" target="_blank">Villa</a></th></tr>
<tr>
<td id="picture"><a href="http://www.miosito.it" target="_blank"><img src="images/xxxxx.jpg" alt="DSCN1639 1" width="206" height="137" /></a></td>
<td id="testo">text text text text text text text text text texttexttexttexttexttexttexttexttexttexttexttexttext</td>
</tr>
<tr>
<td id="foot" colspan="2"><a href="http://www.miosito.it" target="_blank">Vai Al sito</a></td>
</tr>
</tbody>
</table>

Come faccio a farlo diventare resposive con quest'ordine 1.intestazione 2.picture 3.testo 4.foot .

Grazie a tutti per l'aiuto.

 

[criric]

Ciao, devi usare il width in percentuale, prova questo

<style type="text/css">
    table.table {
        width: 100%;
    }
    table.table td#picture{
        width: 30%;
    }
    table.table td#picture img{
        width: 100%;
    }
</style>

 

[Domenico Cafaro]

Ciao, devi usare il width in percentuale, prova questo

<style type="text/css">
    table.table {
        width: 100%;
    }
    table.table td#picture{
        width: 30%;
    }
    table.table td#picture img{
        width: 100%;
    }
</style>

Grazie per il consiglio.

solo che la visualizzazione della tabella con dispositivi mobili (forse è meglio usare le mediaqueries) si deve visualizzare verticalmente con quest'ordine:

1.intestazione
2.picture
3.testo
4.foot

quindi senza la visualizzazione di due colonne sulla stessa riga.


Ho provato con le mediaqueries ma mi sono incartato....

Grazie ancora per l'aiuto.

 

[criric]

Rinuncia alla tabella e usa i div, sono molto più personalizzabili