2013-02-11 48 views
6

Tôi muốn hàng trên bảng có kích thước div con của nó (cp2), nhưng tôi không thể kiểm soát chiều cao. Tôi đã thử sửa đổi lề, đệm, chiều cao, bảng table-layout thuộc tính css, nhưng nó không muốn hoạt động.Chiều cao hàng của bảng CSS HTML không hoạt động

enter image description here

Code:

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      .cp1{ 
       display: inline-block; 
       width: 32px; 
       height: 32px; 
       background-color: red; 
       vertical-align: top; 
      } 
      .cp2{ 
       display: inline-block; 
       width: 128px; 
       height: 10px; 
       background-color: black; 
       vertical-align: top; 
       margin:0px; 
       margin-left: 10px; 
      } 
      .out{ 
       display: inline-block; 
       width: 3em; 
       height: 1.2em; 
       background-color: red; 
       vertical-align: top; 
       margin-left: 10px; 
      } 
      td,tr{ 
       padding: 0px; 
       margin:0px; 
      } 
      table{ 
       border: 0px; 
       table-layout:fixed; 
      } 
      .in{ 
       height: 1.2em; 
       padding: 0px; 
       margin-left: 10px; 
       vertical-align: top; 
      } 
     </style> 
    </head> 
    <body> 
       <table> 
        <tr> 
         <td rowspan="2"> 
          <input type="checkbox">cb1 <br/> 
         </td> 
         <td rowspan="2" style="padding-left: 10px;"> 
          <div class="cp1"></div> 
         </td> 
         <td style="height: 1px;"> 
          <div class="cp2"></div> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <div class="out"></div><input class="in" type="text" size="3"> 
         </td> 
        </tr> 
       </table> 
    </body> 
</html> 

Cảm ơn

+1

Bạn đã thử hiển thị: chặn; thay vì inline-block cho cp2 div của bạn? –

+0

@ Marc-EmmanuelRamage Cảm ơn, vâng đó là vấn đề, nhưng tôi nghĩ rằng tôi sẽ cần nó cho lợi nhuận. – xoxox

Trả lời

17

Thay vì <td style="height: 1px;"> này đưa <td style="font-size: 10px;">, và bạn cũng có thể đã thêm line-height: 0px.

+1

Xin lưu ý rằng chiều cao hàng của bạn không phải chiều cao của ô riêng lẻ. bạn cũng có thể đặt kích thước phông chữ trong thẻ . – Kingk

+0

Cảm ơn, vì vậy trên một nội tuyến (hoặc inline-block), chiều cao là chiều cao dòng? Học một cái gì đó mới ... :) – xoxox

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