html - 我正在尝试固定我的HTML表格的高度并遇到困难

我试图将html表的高度固定为320px，但是当我添加更多内容时，表会增长。任何帮助都将不胜感激

<style>
    .blogBox {margin-bottom:20px; border-bottom:#F00 thin dotted; background-color:#f2f2ea; height:320px; overflow:hidden; table-layout:fixed;}
</style>

    <table align="left" width="220" cellpadding="0" cellspacing="0" class="blogBox">
      <tr>
           <td valign="top" height="320px">

               <p class="headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus </p>

              <p class="blog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet, lectus vel mattis mollis, lacus enim feugiat tellus, at sagittis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet, lectus vel mattis mollis, lacus enim feugiat tellus, at sagittis perdiet, lectus vel mattis mollis, lacus enim feu s enim feu s enim feus enim feu</p>
            </td>
        </tr>
     </table>

最佳答案

对于.blogBox添加display:block;

.blogBox
{
  display:block; /*or inline-block, depend of Your need */
  margin-bottom:20px;
  border-bottom:#F00 thin dotted;
  background-color:#f2f2ea;
  height:320px;
  overflow:hidden;
  table-layout:fixed;
}

存在jsfiddle example。我只将height更改为120px用于测试。