当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Setting Table's body height in tbody

问题描述:

I am trying to fix the table's body height and make them scrollable. Basically I have 3 tables, 2 of them I want on top, side by side and third one should be below them.

I want to make the table body height fixed(say 300px) but I am unable to make this effect. I tried various ways but most of them are destroying table layout look.

This is my code-

<div id="DashboardTab" style="display: table-layout;">

<div style="display: inline-block; width: 100%;">

<div id="" style="float: left; width: 50%; ">

<legend>Planned</legend>

<table id="ePlanned"">

<thead>

<tr>

<th>Col1</th>

<th>Col2</th>

<th>Col3</th>

<th>Col4</th>

</tr>

</thead>

<tbody><!-- style="height: 300px; overflow: auto">--><!--tried this and other ways but not working-->

<tr>

<td>MX1</td>

<td>MX2</td>

<td>MX3</td>

<td>MX4</td>

</tr>

</tbody>

</table>

</div>

<div id="" style="float: right; width: 50%;">

<legend>Closed</legend>

<table id="eClosed" >

<thead>

<tr>

<th>Col1</th>

<th>Col2</th>

<th>Col3</th>

<th>Col4</th>

</tr>

</thead>

<tbody></tbody>

</table>

</div>

</div>

<div id="" style="display: inline-block; width: 100%; overflow: auto;">

<legend>Stats</legend>

<table id="uStats" class="display" cellspacing="0" width="102.5%">

<thead>

<tr>

<th>Col1</th>

<th>Col2</th>

<th>Col3</th>

<th>Col4</th>

<th>Col5</th>

<th>Col6</th>

</tr>

</thead>

<tbody></tbody>

</table>

</div>

</div>

and also I made the 3rd table width to 102.5% so it gets aligned to above two table but I know its not good practice.

Can anyone please help me this I have also wasted lots of time.

I want my page to be like below picture.

网友答案:

You will have to set the wrapper div for each table on overflow:auto and set a fixed height for each table.

This is a possible solution:

<div id="DashboardTab" style="display: table-layout;">
            <div style="display: inline-block; width: 100%;">
                <div id="" style="float: left; height:100px; width: 50%; overflow: auto;">  
                    <legend>Planned</legend>
                    <table id="ePlanned">
                        <thead>
                            <tr>
                                <th>Col1</th>
                                <th>Col2</th>
                                <th>Col3</th>
                                <th>Col4</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>MX1</td>
                                <td>MX2</td>
                                <td>MX3</td>
                                <td>MX4</td>
                            </tr><tr>
                                <td>MX1</td>
                                <td>MX2</td>
                                <td>MX3</td>
                                <td>MX4</td>
                            </tr><tr>
                                <td>MX1</td>
                                <td>MX2</td>
                                <td>MX3</td>
                                <td>MX4</td>
                            </tr><tr>
                                <td>MX1</td>
                                <td>MX2</td>
                                <td>MX3</td>
                                <td>MX4</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div id="" style="float: right; height:100px;  width: 50%; overflow: auto;">
                    <legend>Closed</legend>
                    <table id="eClosed" >
                        <thead>
                            <tr>
                                <th>Col1</th>
                                <th>Col2</th>
                                <th>Col3</th>
                                <th>Col4</th>
                            </tr><tr>
                                <td>MX1</td>
                                <td>MX2</td>
                                <td>MX3</td>
                                <td>MX4</td>
                            </tr><tr>
                                <td>MX1</td>
                                <td>MX2</td>
                                <td>MX3</td>
                                <td>MX4</td>
                            </tr><tr>
                                <td>MX1</td>
                                <td>MX2</td>
                                <td>MX3</td>
                                <td>MX4</td>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <div id="" style="display: inline-block; height:100px; width: 100%; overflow: auto;">
                <legend>Stats</legend>
                <table id="uStats" class="display" cellspacing="0" style="width:100%">
                    <thead>
                        <tr>
                            <th>Col1</th>
                            <th>Col2</th>
                            <th>Col3</th>
                            <th>Col4</th>
                            <th>Col5</th>
                            <th>Col6</th>
                        </tr><tr><td>MX1</td><td>MX2</td><td>MX3</td><td>MX4</td></tr><tr><td>MX1</td><td>MX2</td><td>MX3</td><td>MX4</td></tr><tr><td>MX1</td><td>MX2</td><td>MX3</td><td>MX4</td></tr><tr><td>MX1</td><td>MX2</td><td>MX3</td><td>MX4</td></tr><tr><td>MX1</td><td>MX2</td><td>MX3</td><td>MX4</td></tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
网友答案:

Use display:flex .It makes your work easier

#DashboardTab {
  display: flex;

  margin:20px;
}
.item{
width:50%;
  border:1px solid black;
  margin:10px;
}
#DashboardTab table{

}
#DashboardTab table,
tr,
td {
  border: 1px solid black;
  margin: 20px;
}
#table3 {
  display: flex;

  border: 1px solid black;
  justify-content:center;
}
#table3 div {
  flex-shrink: 1;
  width: 100%;
  overflow: auto;
  margin: 50px;
}
#table3 table,
tr,
td {}
<div id="DashboardTab">
  <div class="item">
    <legend>Planned</legend>
    <table id="ePlanned">
      <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
          <th>Col4</th>
        </tr>
      </thead>
      <tbody>
        <!-- style="height: 300px; overflow: auto ">-->
        <!--tried this and other ways but not working-->
        <tr>
          <td>MX1</td>
          <td>MX2</td>
          <td>MX3</td>
          <td>MX4</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="item">
    <legend>Closed</legend>
    <table id="eClosed ">
      <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
          <th>Col4</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>

</div>



<div id="table3">
  <div>
    <legend>Stats</legend>
    <table id="uStats " class="display " cellspacing="0 " width="102.5% ">
      <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
          <th>Col4</th>
          <th>Col5</th>
          <th>Col6</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
分享给朋友:
您可能感兴趣的文章:
随机阅读: