Tabella + CSS

**Osvaldgreen** · 03-01-2014, 20:01

Ciao ragazzi voglio assegnare ad una tabella un particolare stile CSS, quello che mi interessa però è assegnare lo stile CSS solo a questa tabella e non a tutte le altre. Mi spiego meglio, se inserisco il codice che ho scritto sotto lo stile viene applicato a tutte le tabelle della pagina e non alla singola tabella.

<table>
<style type="text/css">
*
{
border: 0;
margin: 0;
padding: 0;
}

table
{
text-align: left;
border-spacing: 0px;
border: 1px solid #aeb3b6;
border-collapse: collapse;

}

table a, table, tbody, tfoot, tr, th, td
{
font-family: Arial, Helvetica, sans-serif;
line-height: 2.0em;
font-size: 13px;
color: #55595c;
}
tbody td{
line-height: 2.5em;
}

table caption
{
padding: .4em 0 ;
font-size: 240%;
font-style: normal;
color: #FB7E00;
}

table a
{
display: block;
text-decoration: none;
color: #FF8E53;
padding-right: 1.5em;

}

table a:hover, table a:focus
{
text-decoration: underline;
}

table th a
{
color: #FF8E53;
text-align: right;
}
table .odd th a,table .odd td a,table .odd td{
color: #666;
padding-right: 1.0 em;
}

table th a:hover, table th a:focus, tbody tr:hover th
{
background-color: #FFCC99;
color: #fff !important;
}
table .odd th,table .odd td{
background-color: #DDDDDD;
}

thead th
{
background-image: url(verlauf_schwarz.gif);
text-transform: uppercase;
font-weight: normal;
letter-spacing: 1px;
color: #fff;

}
tfoot{
background-image: url(verlauf_schwarz.gif);
border-top: 1px solid #fff;

}
tfoot th,tfoot td{
color: #fff;
}

tbody th
{
padding-right: 1.0em;
color: #25c1e2;
font-style: normal;
background-color: #fff;
border-bottom: 1px dotted #aeb3b6;
}

td
{
color: #FF8E1C;
border-bottom: 1px dotted #aeb3b6;
padding-right: 0.5em;

}

tbody tr.odd
{
border-bottom: 1px dotted #aeb3b6;
}

tbody tr:hover td
{
background-color: #FFCC99;
}

tbody tr:hover td,tbody tr:hover th, tbody tr:hover a
{
color: #fff !important;
}
</style>
<tbody>
<tr>
<td>Questa è la prima cella della tabella</td>
<td>Questa è la seconda cella della tabella</td>

</tr>
<tr>
<td>Questa è la terza cella della tabella</td>
<td>Questa è la quarta cella della tabella</td>

</tr>
</tbody>
</table>

**carlomarangoni** · 04-01-2014, 01:07

Le regole css non vanno messe dentro al tag <table>
Cosa significa l'asterisco messo li da solo
Il css va messo tra <head>...</head>
Per applicare le regole css solo a quella tabella assegna un id ai vari elementi e assegna le regole ai vari id

**Osvaldgreen** · 04-01-2014, 12:43

Originariamente inviata da carlomarangoni

Le regole css non vanno messe dentro al tag <table>
Cosa significa l'asterisco messo li da solo
Il css va messo tra <head>...</head>
Per applicare le regole css solo a quella tabella assegna un id ai vari elementi e assegna le regole ai vari id

Si lo so il codice è un po pasticciato ma purtroppo non sono proprio un genio della programmazione

.
Comunque, anche se scritto in maniera disordinata, il codice funziona e fa quello che gli si chiede.
Adesso però lo metto in ordine così faccio una cosa più precisa

.

Per quanto riguarda gli id potresti spiegarmi meglio come si fa

**carlomarangoni** · 04-01-2014, 20:04

Originariamente inviata da Osvaldgreen

....Comunque, anche se scritto in maniera disordinata, il codice funziona e fa quello che gli si chiede......

Fin che il browser riesce ad interpretarlo e non fa conflitti per non funziona più bene!
Esempio:

codice:

<table id="table1">
<tr id="tr1">
<td id="td1">
.............
css
#table1 {regole}
#tr1 {regole}
#td1 {regole}

**Osvaldgreen** · 05-01-2014, 19:53

Originariamente inviata da carlomarangoni

Fin che il browser riesce ad interpretarlo e non fa conflitti per non funziona più bene!
Esempio:

codice:

<table id="table1">
<tr id="tr1">
<td id="td1">
.............
css
#table1 {regole}
#tr1 {regole}
#td1 {regole}

Grazie sei stato gentilissimo ho seguito le tue indicazioni ed ora funziona tutto alla perfezione.

Giuro che ho anche messo tutto in ordine

.

Discussione: Tabella + CSS

Strumenti discussione

Ricerca discussione

Visualizza

Tabella + CSS

Permessi di invio