防止表格列边框接触表格的底部或顶部

我在html中创建表格，并且两列之间的边框完全上下延伸。我怎样才能改变它，使它不会碰到桌子的顶部或底部？防止表格列边框接触表格的底部或顶部

   <title>Home Styles</title> 
       <meta http-equiv="content-type" 
        content="text/html; charset=iso-8859-1" /> 
       <style type="text/css"> 
       p {font-size:small; margin-left: .2in } 
       } 
      </style> 
       </head> 
      <h1>Central Valley Construction</h1> 
       <h2>Home Styles</h2> 

       <table border="1" frame="hsides" width="1170px"> 
      <tr> 
       <td valign="top" 
      style="border-right: 1px black solid; padding- top:70px"align="center"> 
       <a href="Chalet.html">Chalet</a><br /> 
       <a href="ContemporaryRanch.html">Contemporary Ranch</a><br /> 
       <a href="Cottage.html">Country Cottage</a> 
       </td> 

      <td align="center" style="padding-top:40px"> 



       <img src="chalet.jpg" alt="Image of a chalet" height="113" width="200" /> 
       <p><strong>Style</strong>: chalet</p> 
       <p><strong>Square feet</strong>: 1305<br/> 
      <strong>Bedrooms</strong>: 3<br /> 
      <strong>Baths</strong>: 2</p> 


      </td> 
      </tr> 
     </table> 
    </body>

来源

2013-10-08 Jeff Meigs

首先，考虑不要使用表格进行布局，第二，在tr/td里面有一个元素，它在顶部和底部具有边距 – Jacques

IT必须用表格完成，不幸的是我会尝试边距 –

I将我的小提琴改成桌子。 – Jacques

tr/td中有一个元素在顶部和底部有空白。我在下面使用了div s，但它的概念相同。

小提琴：http://jsfiddle.net/LwKGG/1/

HTML：

<div class="wrap"> 
    <div class="border"> 
     Lorem ipsum.... blah blah blah. 
    </div> 
    <div class="right"> 
     Lorem ipsum.... blah blah blah. 
    </div> 
</div>

CSS：

div{ 
    float:left; 
} 

.wrap{ 
    width:500px; 
    background:#ccc; 
    height:800px; 
} 

.border{ 
    margin:20px 5px; 
    padding:10px; 
    border-right:solid 3px #000; 
    height:200px; 
    width:300px; 
} 

.right{ 
    height:150px; 
    background:#369; 
    width:100px; 
    padding:5px; 
    margin:5px 0; 
}

以上小提琴使用表更新。

来源

2013-10-08 02:17:09 Jacques

防止表格列边框接触表格的底部或顶部

回答

相关问题