cách ngắt dòng hoặc khoảng cách giữa hai hàng của bảng html

Tôi cần cung cấp khoảng trống hoặc ngắt giữa hai hàng để trang của tôi trông đẹp mắt.cách ngắt dòng hoặc khoảng cách giữa hai hàng của bảng html

nếu bạn nhìn mã của tôi, tôi đã cung cấp nhiều hàng và cột trống để tạo khoảng trắng giữa hai hàng trong bảng.

Vui lòng nói bất kỳ cách thích hợp nào khác để cung cấp khoảng trống giữa hai hàng.

đây là mẫu mã của tôi:

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

Nguồn

2013-09-25 Yellow Flash

Bạn đã thử sử dụng thẻ kiểu để thêm đệm vào hàng? Bạn chỉ nên thực sự sử dụng Bảng cho dữ liệu dạng bảng, như chúng được dự định. –

CSS là bạn của bạn. Có vẻ như bạn đang sử dụng '

' chỉ đơn giản là để cung cấp bố cục. Đó thường không phải là một ý tưởng hay.Nếu bạn phải/sẽ sử dụng một bảng, hãy sử dụng các kiểu CSS trên bảng để đạt được bố cục mong muốn. –

Trả lời

Theo mô hình hộp CSS:

giá trị ký quỹ không áp dụng cho các hàng trong bảng và ô bảng
Xem: http://www.w3.org/TR/CSS2/box.html#margin-properties

padding và biên giới các giá trị không áp dụng cho hàng bảng nhưng áp dụng đối với các tế bào bảng
Xem: http://www.w3.org/TR/CSS2/box.html#padding-properties

Khắc phục nhanh là thêm đệm để đầu hàng mà bạn muốn tách riêng .

Ví dụ: http://jsfiddle.net/audetwebdesign/caXsZ/

HTML mẫu:

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

Nếu bạn muốn phong cách viền xung quanh các tế bào bảng, bạn có thể cần thêm hàm bao quanh nội dung và áp dụng đường viền tùy thuộc vào chi tiết thiết kế.

Nguồn

2013-09-25 16:22:43

nó hoạt động !!! Cảm ơn –

Rất vui được trợ giúp. Hãy nhớ chấp nhận câu trả lời! –

của nó không lấy margin.? wts các giải pháp cho điều này –

Đặt thuộc tính margin cho một thẻ <tr>:

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

Hoặc làm cho toàn bộ bảng với phong cách này:

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

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

Nguồn

2013-09-25 15:54:54

Điều này không hoạt động, CSS bỏ qua lề và đệm trên hàng của bảng. –

Các cách chính xác để tạo khoảng cách cho các bảng là sử dụng cellpadding và cellspacing ví dụ

<table cellpadding="4">

hoặc sử dụng css:

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

Nguồn

2013-09-25 15:54:55

Điều này không hoạt động, CSS bỏ qua lề và đệm trên hàng của bảng. –

cảm ơn, nó đã chỉnh sửa –

border spacing attribute has to be specified in CSS 

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

Đoạn mã trên thiết 10px khoảng cách giữa các hàng và khoảng cách 0px giữa các cột

Nguồn

2013-09-25 15:57:56 Sudharsun

Hãy thử điều này:

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

Nguồn

2014-05-27 19:57:50 MJ33

hoàn hảo! Cám ơn vì đã chia sẻ.. – Xplora

này có thể đạt được như thế này.

<tr> <td> <br> </td>  </tr>

Nguồn

2016-03-14 11:59:42 anand24

cách ngắt dòng hoặc khoảng cách giữa hai hàng của bảng html

Trả lời

Các vấn đề liên quan