Question

我想让我的桌子保持50％的身体大小，而不是超出页面大小的范围，但是当我调整到350px或更小的移动尺寸时，它将超出范围。如何解决这个问题？感谢

<style type="text/css">
  body{
    padding-top: 10px;
    padding-left: 10px;
    width: 100%;
  }
  .scrolltable {
    overflow-x: visible;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .scrolltable > .header {
  }
  .scrolltable > .body {
    /*noinspection CssInvalidPropertyValue*/
    width: -webkit-fit-content;
    overflow-y: scroll;
    flex: 1;
    -webkit-flex: 1;
    box-shadow: 10px 10px 5px #888888;
  }

  /* an outside constraint to react against */
  #constrainer {
    float: right;
    margin-right: 80px;
    width: 50%;
    height:250px;
  }

  table {
    font-size:22px;
    border-collapse: collapse;
  }
  th, td {
    border-radius:25px;
    min-width:120px;
  }
  th {
    color: white;
    border-width: 1px;
    font-weight: bold;
    background-color:#3986d3;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  td {
    border-width: 1px;
    text-align:center;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  tr:first-child td {
    border-top-width: 0;
  }
  tr:nth-child(even) {
    background-color:#f2f2f2        ;
  }

  tr:hover{background-color:#BEBEBE}
</style>

HTML下面

<body>
  <div id="constrainer">
    <div class="scrolltable">
      <table class="header">
        <thead> 
          <th>
            工位
          </th>
          <th>
            位置
          </th>
          <th>
            速度
          </th>
          <th>
            加速度
          </th>
          <th>
            減速度
          </th>
          <th>
            加加速度
          </th>
        </thead>
      </table>
      <div class="body">
        <table>
          <tbody>
            <tr>
              <td>原點</td>
              <td id="inp01"></td>
              <td id="inp02"></td>
              <td id="inp03"></td>
              <td id="inp04"></td>
              <td id="inp05"></td>
            </tr>
            <tr>
              <td>01</td>
              <td id="inp11"></td>
              <td id="inp12"></td>
              <td id="inp13"></td>
              <td id="inp14"></td>
              <td id="inp15"></td>
            </tr>
            <tr>
              <td>02</td>
              <td id="inp21"></td>
              <td id="inp22"></td>
              <td id="inp23"></td>
              <td id="inp24"></td>
              <td id="inp25"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <button id="btnright1" style="width:50px; height:50px;" />
  <div style="margin-left:100px;">
    <p>速度</p> <input id="setSpeed" type="number" style="width:100px; height:30px;  border-radius: 20px; "  />
  </div>
</body>

Answer 1

您应该了解media-queries

所以我不知道你想要的布局是什么，但我会告诉你我使用媒体查询做的结果。

Queries.css

            /* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    table{
        font-size: 10px !important;
        margin-left: 80px;
    }
    scrolltable > .body {
            /*noinspection CssInvalidPropertyValue*/
            width: 100% !important;
            overflow-y: scroll;
            flex: 1;
            -webkit-flex: 1;
            box-shadow: 10px 10px 5px #888888;

        }
     #constrainer {
         width: 100% !important;

    }
    #btnright1{
        margin:30px 0;
    }
}

Answer 2

正如其他人告诉你的那样，你必须阅读媒体查询。并尝试阅读bootstrap的响应，这是一个真正易于理解的

这是媒体查询的语法

@media not|only mediatype and (media feature) {
   CSS-Code;
}

<!DOCTYPE html>
 <html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

 <div class="container">
 <h2>Table</h2>
   <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>                                                                                      
  <div class="table-responsive">          
    <table class="table">
      <thead>
       <tr>
          <th>#</th>
             <th>Firstname</th>
             <th>Lastname</th>
             <th>Age</th>
             <th>City</th>
             <th>Country</th>
       </tr>
      </thead>
     <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
     </tr>
    </tbody>
  </table>
  </div>
 </div>

</body>
</html>

Answer 3

更新了代码..我猜这就是你想要的。您还应该使用head中的视口元标记来控制移动浏览器上的布局。 <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"/>

＆＃13;

body {
  padding-top: 10px;
  padding-left: 10px;
}
.scrolltable {
  height: 50vh;
  overflow-x: visible;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}
.scrolltable > .header {} .scrolltable > .tbody {
  /*noinspection CssInvalidPropertyValue*/
  width: -webkit-fit-content;
  overflow-y: scroll;
  flex: 1;
  -webkit-flex: 1;
  box-shadow: 10px 10px 5px #888888;
}
/* an outside constraint to react against */

table {
  font-size: 90%;
  border-collapse: collapse;
}
th,
td {
  border-radius: 25px;
  width: 120px;
}
th {
  color: white;
  border-width: 1px;
  font-weight: bold;
  background-color: #3986d3;
  padding-top: 5px;
  padding-bottom: 5px;
}
td {
  border-width: 1px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
tr:first-child td {
  border-top-width: 0;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr:hover {
  background-color: #BEBEBE
}

＆＃13;

<body>
  <div id="constrainer">
    <div class="scrolltable">
      <table class="header">
        <thead>
          <th>
            工位
          </th>
          <th>
            位置
          </th>
          <th>
            速度
          </th>
          <th>
            加速度
          </th>
          <th>
            減速度
          </th>
          <th>
            加加速度
          </th>
        </thead>
      </table>
      <div class="tbody">
        <table>
          <tbody>
            <tr>
              <td>
                原點
              </td>
              <td id="inp01">

              </td>
              <td id="inp02">

              </td>
              <td id="inp03">

              </td>
              <td id="inp04">

              </td>
              <td id="inp05">

              </td>
            </tr>
            <tr>
              <td>
                01
              </td>
              <td id="inp11">

              </td>
              <td id="inp12">

              </td>
              <td id="inp13">

              </td>
              <td id="inp14">

              </td>
              <td id="inp15">

              </td>
            </tr>
            <tr>
              <td>
                02
              </td>
              <td id="inp21">

              </td>
              <td id="inp22">

              </td>
              <td id="inp23">

              </td>
              <td id="inp24">

              </td>
              <td id="inp25">

              </td>
            </tr>


          </tbody>
        </table>
      </div>
    </div>

    <button id="btnright1" style="width:50px; height:50px;" />


    <div style="margin-left:100px;">
      <p>速度</p>
      <input id="setSpeed" type="number" style="width:100px; height:30px;  border-radius: 20px; " />
    </div>
  </div>
</body>

＆＃13;

HTML RWD调整大小表

3 个答案: