2013-02-11 10 views
6

Ich möchte die obere Tabellenzeile die Größe des untergeordneten div (cp2) haben, aber ich konnte die Höhe nicht steuern. Ich habe versucht, den Rand, Polsterung, Höhe, Tabellen table-layout CSS-Attribut zu ändern, aber es will nicht funktionieren.HTML-CSS-Tabellenzeilenhöhe funktioniert nicht

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> 

Dank

+1

Haben Sie versucht, Anzeige: Block; anstelle von Inline-Block für Ihre CP2 Div? –

+0

@ Marc-EmmanuelRamage Danke, ja, das war das Problem, aber ich dachte, ich würde es für den Rand brauchen. – xoxox

Antwort

17

Statt dieser <td style="height: 1px;"> setzen <td style="font-size: 10px;">, und Sie können auch line-height: 0px hinzufügen.

+1

Bitte beachten Sie Ihre Zeilenhöhe nicht einzelne Zellenhöhe. Sie können die Schriftgröße auch in Tag setzen. – Kingk

+0

Danke, also bei einem Inline (oder Inline-Block) ist die Höhe die Zeilenhöhe? Etwas Neues gelernt ... :) – xoxox

Verwandte Themen