Question

我正在尝试将我的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>

Answer 1

.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以进行测试。

Answer 2

您可以将表放在带有max-height的div中，并阻止它在这个意义上进一步向下移动。否则，我不相信你可以通过增加内容来阻止桌面变大。我认为如果您使用tbody标记并将其设置为display:block并给它设置一个高度，它会起作用，但可能会导致错位。

示例HTML：

<div class="pane">
   <table align="left" width="220px" cellpadding="0" cellspacing="0" class="blogBox">
      <tr>
         <td valign="top">
            <p class="headline">Lorem Ipsum</p>
            <p class="blog">Lorem</p>
         </td>
      </tr>
   </table>
</div>

示例CSS：

.pane {
  display: inline-block;
  overflow-y: scroll;
  max-height:320px;
}

在这里小提琴：https://jsfiddle.net/Ljaxw8kr/2/

Answer 3

在tbody标记内取table并设置其风格

{overflow:hidden; max-height:320px; display:block;}.

它适合你。或者，您可以将表格放在div标记内并设置其样式

{overflow:hidden; max-height:320px;}

Answer 4

.blog {height:320px; overflow:hidden;}

将此添加到您的CSS中。

我试图修复我的html表的高度并遇到困难

4 个答案: