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

Question

我正在用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>

Answer 1

在tr/td内部有一个元素，其顶部和底部有边距。我在下面使用div，但它的概念相同。

更新版本，包含表格

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

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

.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;
}

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

原始版本

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

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