HTML RWD调整表格大小_Html_Css

HTML RWD调整表格大小

html css

HTML RWD调整表格大小,html,css,Html,Css,我想使我的表格保持50%的正文大小，而不是超出页面大小的范围，但当我调整到移动大小（如350px或更小）时，它将超出范围。如何解决此问题？谢谢 css代码身体{ 填充顶部：10px；左侧填充：10px；宽度：100%； } .滚动表{ 溢出x：可见；身高：100%；显示器：flex；显示：-webkit flex；弯曲方向：立柱； -webkit柔性方向：列； } .scrolltable>.header{ } .scrolltable>.body{ /*无检查CssInval

我想使我的表格保持50%的正文大小，而不是超出页面大小的范围，但当我调整到移动大小（如350px或更小）时，它将超出范围。如何解决此问题？谢谢

css代码


身体{
填充顶部：10px；
左侧填充：10px；
宽度：100%；
}
.滚动表{
溢出x：可见；
身高：100%；
显示器：flex；
显示：-webkit flex；
弯曲方向：立柱；
-webkit柔性方向：列；
}
.scrolltable>.header{
}
.scrolltable>.body{
/*无检查CssInvalidPropertyValue*/
宽度：-webkit适合内容；
溢出y：滚动；
弹性：1；
-webkit-flex:1；
盒影：10px 10px 5px#8888888；
}
/*应对的外部约束*/
#约束器{
浮动：对；
右边距：80px；
宽度：50%；
高度：250px；
}
桌子{
字体大小：22px；
边界塌陷：塌陷；
}
th，td{
边界半径：25px；
最小宽度：120px；
}
th{
颜色：白色；
边框宽度：1px；
字体大小：粗体；
背景色：#3986d3；
垫面：5px；
垫底：5px；
}
运输署{
边框宽度：1px；
文本对齐：居中；
垫面：5px；
垫底：5px；
}
tr：第一个孩子td{
边框顶部宽度：0；
}
tr:n个孩子（偶数）{
背景色：#F2F2；
}
tr:hover{背景色：#BEBEBE}

下面是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>


工位
位置
速度
加速度
減速度
加加速度
原點
01
02
速度

您应该了解

所以我不知道你不想做什么，但我会向你展示我使用媒体查询的结果

querys.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;
    }
}

正如其他人告诉你的，你一定要阅读媒体查询。试着读一下，这是一本很容易理解的书

这是媒体查询的语法

@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>

@media not |仅媒体类型和（媒体功能）{
CSS代码；
}
桌子
.table responsive类创建一个响应表，它将在小型设备（768px以下）上水平滚动。在任何大于768px的屏幕上观看时，都没有区别：
#
名字
姓氏
年龄
城市
国家
1.
安娜
皮特
35
纽约
美国

更新了您的代码..我猜这就是您想要的。您还应该在

head

中使用viewport meta标记来控制移动浏览器上的布局。

正文{
填充顶部：10px；
左侧填充：10px；
}
.滚动表{
高度：50vh；
溢出x：可见；
显示器：flex；
显示：-webkit flex；
弯曲方向：立柱；
-webkit柔性方向：列；
}
.scrolltable>.header{}.scrolltable>.tbody{
/*无检查CssInvalidPropertyValue*/
宽度：-webkit适合内容；
溢出y：滚动；
弹性：1；
-webkit-flex:1；
盒影：10px 10px 5px#8888888；
}
/*应对的外部约束*/
桌子{
字体大小：90%；
边界塌陷：塌陷；
}
th，
运输署{
边界半径：25px；
宽度：120px；
}
th{
颜色：白色；
边框宽度：1px；
字体大小：粗体；
背景色：#3986d3；
垫面：5px；
垫底：5px；
}
运输署{
边框宽度：1px；
文本对齐：居中；
垫面：5px；
垫底：5px；
}
tr：第一个孩子td{
边框顶部宽度：0；
}
tr:n个孩子（偶数）{
背景色：#F2F2；
}
tr：悬停{
背景色：#BEBEBE
}


工位
位置
速度
加速度
減速度
加加速度
原點
01
02
速度

我已经知道媒体查询，关键是布局会像你在上面发布的那样混乱我发现我唯一需要的是最小宽度到最小宽度我发现我唯一需要的是最小宽度到最小宽度你知道为什么{width:120px；}当我放大屏幕时宽度仍然会改变吗？@seasureqwe是的，差不多就是这样。如果在浏览器（如chrome等）中缩放，字体也会改变。回答你另一个问题。如果将

th{width:120px；}

设置为

minwidth

，则该大小将保持不变

@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>