Chèn hàng bảng trống có chiều cao nhỏ hơn

Question

Tôi có một bảng bao gồm hàng tiêu đề và một vài hàng dữ liệu. Những gì tôi muốn làm là tạo một hàng trống ở giữa tiêu đề và các hàng dữ liệu, nhưng tôi muốn hàng trống này nhỏ hơn chiều cao so với các hàng khác (để không có khoảng cách lớn như vậy).

Tôi làm cách nào để thực hiện việc này?

HTML My mark-up mã cho bảng được như sau:

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

Answer 1

Chỉ cần thêm quy tắc CSS (và được cải thiện đôi chút mark-up) đăng tải dưới đây và bạn sẽ nhận được kết quả mà bạn đang theo đuổi.

CSS

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

HTML

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

Vì tôi không có ý tưởng gì stylesheet hiện tại của bạn trông giống như tôi đã thêm các !important sở hữu chỉ trong trường hợp. Tuy nhiên, nếu có thể, bạn nên loại bỏ nó như là một trong những hiếm khi muốn dựa vào các tờ khai !important trong một bản định kiểu xem xét khả năng lớn mà họ sẽ mess nó lên sau này.

Answer 2

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

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

Answer 3

Bạn không cần thêm hàng bảng để tạo không gian bên trong bảng. Xem this jsFiddle.
(Tôi đã làm cho khoảng cách màu xám nhạt, vì vậy bạn có thể nhìn thấy nó, nhưng bạn có thể thay đổi điều đó thành trong suốt.)

Sử dụng hàng bảng chỉ nhằm mục đích hiển thị là lạm dụng bảng!

Answer 4

tôi không thể có được bất cứ điều gì để làm việc cho đến khi tôi cố gắng dòng đơn giản này:

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

cho phép bạn thay đổi một chiều cao dòng phụ nội dung trái tim của bạn (Tôi đã [có thể lạm dụng Bảng để có được ba cột (ô trống) của văn bản mà tôi thì muốn xếp hàng dọc theo phía dưới)

tôi là một nghiệp dư như vậy sẽ đánh giá cao ý kiến ​​

Answer 5

tôi biết câu hỏi này đã có một câu trả lời, nhưng tôi phát hiện ra một thậm chí đơn giản hơn cách làm điều này .

Chỉ cần thêm

<tr height = 20px></tr> 

Into the bàn nơi bạn muốn có một hàng trống. Nó hoạt động tốt trong chương trình của tôi và nó có thể là giải pháp nhanh nhất có thể.