Tabella con riga più lunga

miagy

Utente Attivo
2 Nov 2014
70
0
6
Ciao ragazzi,
mi sto dilettando nella combo html + css
Per il momento, da un punto di vista stilistico, non ho problemi. Ho solo un dubbio sulla creazione di una riga più lunga dentro una tabella.
Per semplificare, ecco un'immagine bozza:

prova-tabella.png


Come potete vedere, la riga contenente IMM, SCRITTA, IMM, SCRITTA è più lunga e fuoriesce dalla tabella principale.
Ecco, chiedo aiuto proprio su questo effetto. Quale sarebbe la sintassi corretta?
E come posso allineare gli oggetti sottostanti in maniera ordinata? :(
 

miagy

Utente Attivo
2 Nov 2014
70
0
6
Posta il codice che stai usando
Ciao Tommy, grazie della risposta.

Non l'ho ancora iniziato. Avevo iniziato a idearlo usando il linguaggio base della tabella (table, tr, td), ma mi sono bloccato subito perché, una volta giunto al tr, non avevo idea di come rendere quell'effetto.
 

Tommy03

Utente Attivo
6 Giu 2018
550
53
28
17
Bassano del Grappa (VI)
Ma non ho capito, hai avuto un problema che vorresti restringere quei due bordi per avere tutta la tabella uniforme, o stai cercando di ottenere l'effetto dei due bordi più larghi?
 

miagy

Utente Attivo
2 Nov 2014
70
0
6
Ma non ho capito, hai avuto un problema che vorresti restringere quei due bordi per avere tutta la tabella uniforme, o stai cercando di ottenere l'effetto dei due bordi più larghi?
Sto cercando di ottenere l'effetto dei due bordi più larghi.
 

Tommy03

Utente Attivo
6 Giu 2018
550
53
28
17
Bassano del Grappa (VI)
Prova a impostare una width sulla table ad esempio di 400px. Poi in quel tr che vuoi avere più largo metti width di 460, con margin-left di -30 e prova a vedere che succede
 

miagy

Utente Attivo
2 Nov 2014
70
0
6
Prova a impostare una width sulla table ad esempio di 400px. Poi in quel tr che vuoi avere più largo metti width di 460, con margin-left di -30 e prova a vedere che succede
Ciao Tommy, grazie del suggerimento.
Purtroppo no, non dà il risultato sperato.
Ti copio la bozza che ho fatto:

HTML:
<!-- iniziamo la tabella principale -->

<table width="400" align="center" class="listone" cellpadding=0 cellspacing=0>
<tr>
<td align=center colspan=4>INTESTAZIONE</td>
    </tr>
<!-- inseriamo la riga i cui lati devono uscire fuori dalla tabella -->

    <tr style="width:460px;margin-left:-30px;">
        <td colspan="2" align="center" class="elenco">
           
            IMM
       
        </td>
        <td  align="center" class="elenco">
           
            SCRITTA
       
        </td>  
        <td  align="center" class="elenco">
           
            IMM
       
        </td>
    </tr>
<!--ora inseriamo i dati -->
   
    <tr height=20>
<td width=25 align=center>
IMMAGINE
</td>      
<td height=25 align=center valign=center>
Scritta
</td>
<td width="150" valign=center align=center>IMMAGINE</td>
<td width="150" valign=center align=center>SCRITTA</td>
</tr>
Questo èil css

CSS:
table.listone{

    border-collapse:collapse;
    background-color: #091729;
    border: 1px solid #000810;

}
.corpo{
font-family: calibri;
font-size: 13px;
color: #7ba1d3;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
}