一个单元格的HTML表动态高度

时间:2015-10-27 20:29:31

标签: html css html-table tablelayout

是否可以使用一个分配单元格高度的表格,如下所示?

client.elements('xpath', ".//a[@class='abcd')]", function (allButtons){

    allButtons.value.forEach(function (index) {
    console.log('Element value is '+index.ELEMENT)
    client.elementIdClick(index.ELEMENT);}})

因此,第一个和最后一个单元格的高度是固定的,中心单元格应该是动态且可滚动

目前我有以下代码但不起作用:

______________________________________
|            fixed height            |
|____________________________________|
|                                    |
|                                    |
|           dynamic height           |
|                                    |
|____________________________________|
|            fixed height            |
|____________________________________|

编辑:它不需要是一个表,中心元素具有动态高度并且可滚动是非常重要的

编辑:我知道我可以指定要滚动的元素的高度 - 然后它可以工作。但我希望元素的高度是动态的

1 个答案:

答案 0 :(得分:1)

你可能想要这个:

1)我向表格提供了height:auto,此处width:80%表格是可选的。

2) Divtd height:60px; overflow:auto;(只是随机出现滚动条),以及td's

3)第一个和第二个height:30px;具有特定<table style="height:auto; width:80%;" border=1> <tr> <td height="30px">First element</td> </tr> <tr> <td> <!-- Div for scroll functionality if content is too high --> <div style="overflow:auto; height: 60px;"> Dynamic content which needs to be scrolled sometimes Dynamic content which needs to be scrolled sometimes Dynamic content which needs to be scrolled sometimes Dynamic content which needs to be scrolled sometimes Dynamic content which needs to be scrolled sometimes Dynamic content which needs to be scrolled sometimes </div> </td> </tr> <tr> <td height="30px">last element</td> </tr> </table>

检查出来:

max-height

更新:无特定高度

我在更新中使用了<table style="height:auto; width:75%; margin:0px auto;" border=1> <tr> <td height="30px">First element</td> </tr> <tr> <td> <!-- Div for scroll functionality if content is too high --> <div style="overflow:auto; max-height:100px;"> Dynamic content which needs to be scrolled sometimes Dynamic content which needs to be scrolled sometimes Dynamic content which needs to be scrolled sometimes Dynamic content which needs to be scrolled sometimes Dynamic content which needs to be scrolled sometimes Dynamic content which needs to be scrolled sometimes Dynamic content which needs to be scrolled sometimes Dynamic content which needs to be scrolled sometimes </div> </td> </tr> <tr> <td height="30px">last element</td> </tr> </table>

%

  

注意:如果您想max-height height使用width100%等于body {{1}} {{1}} {{1}} 1}}。