Question

所以下面我有2个测试，第一个有自动宽度，而第二个有固定宽度（通过窗口加载事件给出的指定宽度），两者都有'overflow auto'样式。有没有办法我可以自动使表进入其容器div并且不超过其父div宽度，就像它拒绝子容器在其父容器上的行为一样？我不想仅仅为了解决问题而指定父级的宽度（它必须是自动宽度以满足其响应性）。任何帮助，线索，建议，想法，建议都非常感谢，谢谢。

$(window).load(function(){
  //set the width of the #test2
  $("#test2").css({ 'width' : $("#test2_wrapper").width() + 'px', 'margin' : '0px auto' });
  alert("#test2 div, has a width of "+$("#test2_wrapper").width()+"px");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div style="overflow:auto;width:100%;border:1px solid blue;">
  <h3>Without specifying width on the container</h3>
<div style="overflow:auto;">
  <table class="table table-hover">
    <thead>
      <tr>
        <td>Username</td>
        <td>Real Password</td>
        <td>Firstname</td>
        <td>Middlename</td>
        <td>Lastname</td>
        <td>Address</td>
        <td>Age</td>
        <td>Gender</td>
        <td>Martial Status</td>
        <td>Civil Staus</td>
        <td>Mother's Maiden Name</td>
        <td>Father's name</td>
        <td>Contact number incase of emergency</td>
        <td>Status</td>
        <td>STTR</td>
        <td>BIR</td>
        <td>SSS</td>
        <td>Identity number</td>
        <td>Student ID number</td>
        <td>Employee number</td>
        <td>Have you ever tried taco</td>
        <td>Will this is a test to see the tables full length</td>
        <td>Will, the world aint no sunshine and rainbows</td>
        <td>If you dont work hard, you'll end up in a lossers corner</td>
        <td>This is the end of the test</td>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>
</div>
<div id="test2_wrapper" style="width:600px;border:1px solid red;">
  <h3>With specifying width on the container</h3>
<div style="overflow:auto;border:1px solid pink;" id="test2">
  <table class="table table-hover">
    <thead>
      <tr>
        <td>Username</td>
        <td>Real Password</td>
        <td>Firstname</td>
        <td>Middlename</td>
        <td>Lastname</td>
        <td>Address</td>
        <td>Age</td>
        <td>Gender</td>
        <td>Martial Status</td>
        <td>Civil Staus</td>
        <td>Mother's Maiden Name</td>
        <td>Father's name</td>
        <td>Contact number incase of emergency</td>
        <td>Status</td>
        <td>STTR</td>
        <td>BIR</td>
        <td>SSS</td>
        <td>Identity number</td>
        <td>Student ID number</td>
        <td>Employee number</td>
        <td>Have you ever tried taco</td>
        <td>Will this is a test to see the tables full length</td>
        <td>Will, the world aint no sunshine and rainbows</td>
        <td>If you dont work hard, you'll end up in a lossers corner</td>
        <td>This is the end of the test</td>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>
</div>

表格超出容器包装

0 个答案: