2012-03-16 15 views
33

Mam tabelę składającą się z wiersza nagłówka i kilku wierszy danych. Co chcę zrobić, to utworzyć pusty wiersz pomiędzy nagłówkiem i wierszami danych, ale chcę, aby ten pusty wiersz był mniejszy niż inne wiersze (tak, że nie ma tak dużej luki).Wstawianie pustego wiersza tabeli o mniejszej wysokości

Jak mogę to zrobić?

Mój kod HTML mark-up na stole jest następujący:

<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> 

Odpowiedz

41

Wystarczy dodać regułę CSS (i nieco lepszą marżę) pisał poniżej i powinieneś uzyskać wynik, który chcesz osiągnąć.

CSS

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

HTML

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

Ponieważ nie mam pojęcia, co wygląda aktualna stylów jak dodałem właściwość !important na wszelki wypadek. Jeśli to możliwe, powinieneś go usunąć, ponieważ rzadko chcesz polegać na deklaracjach !important w arkuszu stylów, biorąc pod uwagę duże prawdopodobieństwo, że zepsują to później.

+1

To działa i jest zgodne z moim aktualnym kodowaniem. –

3

Spróbuj tego:

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

W XHTML 1.0 Strict, atrybut 'style =" "' nie jest autoryzowany. Twój kod musi być taki sam dla każdego typu dokumentu. –

+1

@FrederickMarcoux Czy żartujesz? Zgodnie z XHTML 1.0 Strict, atrybut 'style' jest jedynym poprawnym atrybutem w przykładzie Barry'ego! –

+0

Według mojego kursu HTML, w XHTML Strict, nie możemy użyć atrybutu 'style'? –

8

Nie potrzebujesz dodatkowego wiersza tabeli, aby utworzyć miejsce wewnątrz tabeli. Zobacz this jsFiddle.
(Ja zrobiłem lukę w kolorze jasnoszarym, aby można było ją zobaczyć, ale można ją zmienić na przezroczystą).

Używanie wiersza tabeli tylko do celów wyświetlania jest nadużyciem tabeli!

+0

Masz rację i lubię elegancję Twojego rozwiązania. Potrzebuję też separacji, także w tabeli. Biorąc pod uwagę zgodność z moim obecnym kodowaniem, wybiorę łatwą drogę. –

-4

nie mogłem dostać coś do pracy dopóki nie próbowałem tej prostej linii:

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

który pozwala zmieniać wysokość wiersza wypełniacz do syta (byłem [prawdopodobnie nadużywają Tabela uzyskać trzy kolumny (pola) tekstu, który ja potem chcieli wyrównać wzdłuż dolnej)

Jestem amatorem więc docenić komentarze

+0

Powinienem był rozpoznać źródło: http://www.gokgs.com/help/_it_IT/EditorsTipsAndTricks.html - ale wydaje się, że nie ma on trasy kontaktu ... i wygląda na to, że jest trochę zasilany konfiguracja gry ... a do tej pory unikałem tej uzależniającej trasy odkąd spędziłem całą noc ~ 30 lat temu z Space Invaders –

+0

FYI, kiedy chcesz mieć kod źródłowy w swojej odpowiedzi, wciskaj tę linię w 4 spacje na początku To pozwoli ci mieć znaczniki < > – shiser

4

wiem, że to pytanie jest już odpowiedź, ale okazało się jeszcze prostsze sposób robienia tego .

Wystarczy dodać

<tr height = 20px></tr> 

do tabeli, w którym chcesz mieć pusty wiersz. Działa to dobrze w moim programie i jest to prawdopodobnie najszybsze możliwe rozwiązanie.

Powiązane problemy