Inserimento di una riga di tabella vuota con un'altezza minore

Ho una tabella composta da una riga di intestazione e un paio di righe di dati. Quello che voglio fare è creare una riga vuota tra l'intestazione e le righe di dati, ma voglio che questa riga vuota sia più piccola in altezza rispetto alle altre righe (in modo che non ci sia un divario così grande).Inserimento di una riga di tabella vuota con un'altezza minore

Come posso realizzare questo?

mio codice HTML mark-up per la tabella è la seguente:

<table class="action_table"> 
    <tbody> 
     <tr class="header_row"> 
      <td>Header Item</td> 
      <td>Header Item 2</td> 
      <td>Header Item 3</td> 
     </tr>    
     <tr class="blank_row"> 
      <td bgcolor="#FFFFFF" colspan="3">&nbsp;</td> 
     </tr> 
     <tr class="data_row"> 
      <td>Data Item</td> 
      <td>Data Item 2</td> 
      <td>Data Item 3</td> 
     </tr> 
    </tbody> 
</table>

fonte

2012-03-16 Ed.

Basta aggiungere la regola CSS (e il lieve miglioramento del mark-up) postato qui sotto e dovresti ottenere il risultato che cerchi.

CSS

.blank_row 
{ 
    height: 10px !important; /* overwrites any other rules */ 
    background-color: #FFFFFF; 
}

HTML

<tr class="blank_row"> 
    <td colspan="3"></td> 
</tr>

Dato che non ho idea di che cosa il vostro foglio di stile corrente appare come ho aggiunto la proprietà !important per ogni evenienza. Se possibile, però, dovresti rimuoverlo dal momento che raramente vuoi fare affidamento sulle dichiarazioni !important in un foglio di stile, considerando la grande possibilità che lo rovinino più tardi.

fonte

2012-03-16 14:22:06 Tom

Funziona ed è più compatibile con la mia codifica corrente. –

Prova questo:

<td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3>&nbsp;</td>

fonte

2012-03-16 14:18:57

In XHTML 1.0 Strict, l'attributo 'style =" "' non è autorizzato. Il tuo codice deve essere lo stesso per ogni doctype. –

@FrederickMarcoux Stai scherzando? Secondo XHTML 1.0 Strict, l'attributo 'style' è l'unico attributo corretto nell'esempio di Barry! –

Secondo il mio corso di HTML, in XHTML Strict, non possiamo usare l'attributo 'style'? –

Non è necessaria una riga di tabella aggiuntiva per creare spazio all'interno di una tabella. Vedi this jsFiddle.
(Ho reso il colore grigio chiaro, in modo che tu possa vederlo, ma puoi cambiarlo in trasparente.)

Utilizzare una riga tabella solo per scopi di visualizzazione è abuso di tabella!

fonte

2012-03-16 14:32:05

Hai ragione e mi piace l'eleganza della tua soluzione. Ho bisogno di un po 'di separazione altrove, anche se nel tavolo. Quindi, data la compatibilità con la mia attuale codifica, ho intenzione di prendere la via più facile. –

-4

non ho potuto ottenere qualcosa a lavorare fino a quando ho provato questo semplice linea:

<p style="margin-top:0; margin-bottom:0; line-height:.5"><br /></p>

che consente di variare l'altezza linea di riempimento per i vostri cuori contenuto (mi è stato [probabilmente abusare Tabella di ottenere tre colonne (scatole) di testo che ho poi voluto allinearsi lungo la parte inferiore)

sono un dilettante in modo apprezzerebbe commenti

fonte

2015-01-15 22:11:08

Avrei dovuto riconoscere la fonte: http://www.gokgs.com/help/_it_IT/EditorsTipsAndTricks.html - ma non sembrano avere una route di contatto ... e sembra che sia un po 'di alta potenza gioco set-up ... e finora ho evitato quel percorso avvincente da quando sono rimasto sveglio tutta la notte ~ 30 anni fa con Space Invaders –

FYI, quando vuoi avere il codice sorgente nella tua risposta, rientra quella linea con 4 spazi all'inizio Questo ti permetterà di avere i tag < > – shiser

so che questa domanda ha già una risposta, ma ho scoperto un ancora più semplice modo di farlo .

Basta aggiungere

<tr height = 20px></tr>

nella tabella in cui si desidera avere una riga vuota. Funziona bene nel mio programma ed è probabilmente la soluzione più rapida possibile.

fonte

2017-04-16 19:59:42

Inserimento di una riga di tabella vuota con un'altezza minore

risposta

Problemi correlati