2013-09-25 9 views
5

Potrzebuję miejsca lub przerwy między dwoma wierszami, aby moja strona wyglądała dobrze.jak przerwać linię lub spację pomiędzy dwoma wierszami tabeli html

Jeśli spojrzysz na mój kod, podałem wiele pustych wierszy i kolumn, aby utworzyć spację między dwoma wierszami w tabeli.

Podaj inny właściwy sposób, aby zwolnić miejsce między dwoma wierszami.

tutaj jest mój przykładowy kod:

<form:form name="form" method="post" modelAttribute="Abatch"> 

<table> 
<tr> 
    <td>Please enter your comments</td> 
    <td><form:textarea id="textarea" style="width:150%;height:150%" path="Comments" size="255" readonly="false" /></td> 
</tr> 
<tr> 
<tr> 
<tr><td></td></tr> 
<tr><td></td></tr> 
<tr><td></td></tr> 
</tr> 
</tr> 
<tr>  
    <td><input id="button1" type="submit" name="submit" value="Approve"/></td> 
    <td><input id="button4" type="submit" name="submit" value="Reject"/></td> 

    </tr> 
</table> 
+2

Czy próbowali za pomocą znacznika style, aby dodać dopełnienie do wiersza? Powinieneś używać tabel wyłącznie do danych tabelarycznych, ponieważ były one przeznaczone. –

+4

CSS to twój przyjaciel. Wygląda na to, że używasz '

' po prostu do zapewnienia układu. Zazwyczaj nie jest to dobry pomysł.Jeśli musisz/użyjesz tabeli, użyj stylów CSS, aby osiągnąć pożądany układ. –

Odpowiedz

7

Według modelu pudełkowego CSS:

wartości marginesów nie mają zastosowania do wierszy tabeli i komórek tabeli
Zobacz: http://www.w3.org/TR/CSS2/box.html#margin-properties

padding i border wartości nie odnoszą się do wierszy tabeli, ale odnosi się do komórek tabeli
Patrz: http://www.w3.org/TR/CSS2/box.html#padding-properties

Quick Fix jest dodanie dopełnienie do górnej części wiersza, który chcesz oddzielić .

Na przykład: http://jsfiddle.net/audetwebdesign/caXsZ/

HTML próbki:

<table cellpadding="0" cellspacing="0" border="0"> 
    <tr class="row1"> 
     <td>Row One - 1</td> 
     <td>Row One - 2</td> 
    </tr> 
    <tr class="row2"> 
     <td>Row Two - 1</td> 
     <td>Row Two - 2</td> 
    </tr>  
</table> 

CSS:

td { 
    border: 1px dotted blue; 
} 
tr.row2 td { 
    padding-top: 40px; 
} 

Jeśli chcesz styl obramowania wokół komórek tabeli, może trzeba dodać obwoluty wokół treść i stosować granice w zależności od szczegółów projektu.

+0

to działa !!! Dzięki –

+2

Cieszę się, że mogę Ci pomóc. Pamiętaj, aby zaakceptować odpowiedź! –

+0

jego brak marży.? Wts rozwiązanie dla tego –

2

Ustaw atrybut margin dla <tr> tagu:

<tr style="margin-top:10px;"></tr> 

lub uczynić całą tabelę z tego stylu:

<style> 
    table tr { 
     margin-top: 10px; 
    } 

    table tr:first-child { 
     margin-top: 0px; !important 
    } 
</style> 
+0

To nie działa, CSS ignoruje marginesy i wypełnienia w wierszach tabeli. –

4

prawidłowym sposobem nadawania odstępów między tabelami jest użycie komórek i komórek, np

<table cellpadding="4"> 

lub za pomocą css:

<style type='text/css'>  
    table{ border-collapse: separate; } 
    table td { border-spacing: 1em; } 
</style> 
+0

To nie działa, CSS ignoruje marginesy i wypełnienia w wierszach tabeli. –

+0

dzięki, jest edytowany –

4
border spacing attribute has to be specified in CSS 

table 
    { 
    border-collapse:separate; 
    border-spacing:10px 0px; 
    } 

Powyższy kod ustawiony 10px odstępy między wierszami i rozstawie 0px między kolumnami

10

Spróbuj tego:

<tr> 
    <td> 
     Row 1 
    </td> 
</tr> 
<tr> 
    <td> 
     &nbsp; 
     <!--you just need a space in a row--> 
    </td> 
</tr> 
<tr> 
    <td> 
     Row 2 
    </td> 
</tr> 
+0

Perfect! Dzięki za podzielenie się. – Xplora

1

ten można osiągnąć w ten sposób.

<tr> <td> <br> </td> <!--The br tag did what i was looking for --> </tr>