HTML CSS錶行高不起作用

我想讓上表行具有其子div（cp2）的大小，但我無法控制高度。我嘗試修改邊距，填充，高度，表table-layout css-attribute，但它不想工作。HTML CSS錶行高不起作用

enter image description here

代碼：

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

感謝

來源

2013-02-11 xoxox

你試過顯示：block;而不是你的cp2 div的內聯塊？ – 2013-02-11 11:52:00

@ Marc-EmmanuelRamage謝謝，是的，這是問題，但我認爲我需要它的邊緣。 – xoxox 2013-02-11 17:13:17

取而代之的是<td style="height: 1px;">把<td style="font-size: 10px;">，你可能也必須添加line-height: 0px。

來源

2013-02-11 11:54:34 Kingk

請注意，您的行高不是個別的細胞高度。您也可以將字體大小放在標籤中。 – Kingk 2013-02-11 11:56:59

謝謝，所以在內聯（或內聯塊），高度是線高度？學到了新的東西...... :) – xoxox 2013-02-11 17:14:44

HTML CSS錶行高不起作用

回答

相關問題