Question

我的jsp中有一个表可以调整div的div。当我调整div的大小时，我无法调整表格高度的大小。以下是我的片段。请检查一次。

<div id="id" style="height:350px; width250px;" class="control">

    <div id="fifth_heading" class="heading_control">
        <i class="fa2 fa-fifth"></i>
        <p><%=entry1.getDivdescription() %></p>
        <div class="button_right_second">
            <i class="fa3 fa-second3" id="<%=entry1.getDivid() %>"></i>             
        </div>
    </div>

    <div class="fifth_dropdown">
        <div class="table_data" id="table_second">

        <table id="example3"  style="height:auto;"class="display" border="0" cellspacing="0" cellpadding="0">
        <!-- the below tr prints the dates -->
        <tbody>
            <tr  id="line1">
            <td>
                <span id="header_title">Your Current Lead Time</span>             
            </td>
            </tr>
            <tr id="line2">
            <td>
                <span id="value">alignvalue</span>
            </td>
            </tr>
        </tbody>
        </table>

        </div>
    </div>
</div>



div.table_data{margin-left:2px;margin-right:10px;margin-top:5px;overflow:auto;}
#table_second::-webkit-scrollbar{
width:10px;
background-color:#cccccc;
} 
#table_second::-webkit-scrollbar-thumb{
background-color:rgb(78, 82, 93);
border-radius:10px;
}
#table_second::-webkit-scrollbar-thumb:hover{
background-color:rgb(78, 82, 93);
border:1px solid #333333;
}
#table_second::-webkit-scrollbar-thumb:active{
background-color:rgb(78, 82, 93);
border:1px solid #333333;
}

Answer 1

尝试将表格的高度设置为100％并明确设置div的高度。

根据这篇文章回答：link

Answer 2

不确定要调整哪个<div>，但您可以尝试其中一个......

如果您想调整<div id="id" ... class="control">的大小以调整<table>的大小，请尝试使用height单位在div.table_data中添加% percent媒体资源。< / p>

如果您想调整<div>和<table>的尺寸，则必须将<div>的高度设为control，div.table_data和{{1}使用<table>单位的100%或任何值（0-100）。

我这样做后的代码片段......

CSS

% percent

（排除div.table_data { margin-left:2px; margin-right:10px; margin-top:5px; overflow:auto; height:70%; background-color:#ccffcc; }）

HTML

-webkit-scrollbar

此代码段可以使两个<div id="id" style="height:100%; width250px;background-color:#ff9999;" class="control"> <div id="fifth_heading" class="heading_control"> <i class="fa2 fa-fifth"></i> <p>dddddddd</p> <div class="button_right_second"> <i class="fa3 fa-second3" id="ddd"></i> </div> </div> <div class="fifth_dropdown"> <div class="table_data" id="table_second"> <table id="example3" style="height:100%;" class="display" border="1" cellspacing="0" cellpadding="0">  <tbody> <tr id="line1"> <td> <span id="header_title">Your Current Lead Time</span> </td> </tr> <tr id="line2"> <td> <span id="value">alignvalue</span> </td> </tr> </tbody> </table> </div> </div> </div>和<div>在重新调整大小时重新调整大小。

如果您不喜欢，如果您的窗口尺寸太小，<table>会太小，您可以使用<table> CSS属性。如果尺寸较大，请使用min-height。

在调整div的大小时，表中没有调整大小

2 个答案: