表的高度是恆定的

Question

我想讓一個表讓我們說400px height，我希望這個值永不改變，當我修改表格行的高度javascript？是否有任何屬性允許行的高度永遠不會超過某個值？

Answer 1

我不知道究竟你正在尋找。從你的問題我可以猜測，即使你的總行包含高度超過400px，你的表不應該超過400px的高度。

按我的理解，我建議你把你的表到DIV（具有和400像素高度和溢出自動）如下面的例子中提到的：

<div style="max-height:400px;overflow:auto"> 
    <table> 
     <tr style="height:500px"> 
      <td> 
       Spider Code 
      </td> 
     </tr> 
    </table> 
</div> 

[注：您可以刪除高度從tr。我已經把它只是爲了表明溢出。]

根據上述解決方案，如果高度超過400px，則會顯示滾動條。

如果你想要你的行高不會超過一些像素，那麼將max-height設置爲如下所述的行。

tr 
{ 
max-height:20px; 
overflow:hidden; 
} 

Answer 2

使用CSS max-height屬性表

tr{ 
max-height: 20px; 
overflow:hidden; 
} 
table{ 
max-height:400px; 
overflow:hidden; 
} 

Answer 3

更新：我假設<tr>方面的max-height，他們不這樣做，所以我相應地更新我的答案。

來源：Setting max-height for table cell contents

片斷展示瞭如何設置在<tr>/<td>最大高度（使用一個div）。 它也展示了一種方法，當達到最大高度時如何讓<table>滾動。

您需要在<td>內添加一個div，以在您的行上啓用最大高度。

table, td { 
 
    border: 1px solid; 
 
} 
 
table { 
 
    display: inline-block; 
 
    padding-right: 20px; 
 
    max-height: 160px;   /* set max to 250px and table will loose scroll */ 
 
    height: auto; 
 
    overflow: auto; 
 
} 
 
td div { 
 
    width: 100px; 
 
    max-height: 40px; 
 
    overflow: hidden; 
 
}

<table> 
 
    <tr> 
 
     <td> 
 
      <div> 
 
       Test text 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div> 
 
       Test text 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div> 
 
       Test text 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div> 
 
       Test text 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div> 
 
       Long text<br /> 
 
       Long text<br /> 
 
       Long text<br /> 
 
       Long text<br /> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div> 
 
       Long text<br /> 
 
       Long text<br /> 
 
       Long text<br /> 
 
       Long text<br /> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div> 
 
       Long text<br /> 
 
       Long text<br /> 
 
       Long text<br /> 
 
       Long text<br /> 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div> 
 
       Long text<br /> 
 
       Long text<br /> 
 
       Long text<br /> 
 
       Long text<br /> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div> 
 
       Test text 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div> 
 
       Test text 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div> 
 
       Test text 
 
      </div> 
 
     </td> 
 
     <td> 
 
      <div> 
 
       Test text 
 
      </div> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 4

什麼是你設置在tr的高度在JavaScript這意味着更少，如果它存在的最大高度。所以給你的tr最大高度的屬性，這將限制你增長超過最大高度。