HTML RWD調整表格

-1

我想讓我的表，以保持身體的50％的大小，而不是到了頁面大小的範圍內，但是當我調整到手機大小像350像素或更小，它會超出範圍。如何解決這個問題？謝謝HTML RWD調整表格

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

來源

2015-12-16 seasonqwe

的語法。你也應該使用視meta標籤在你head對移動瀏覽器控制佈局。 <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"/>

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 
 
}

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

來源

2015-12-16 05:36:40 Guille

你可以點你可以編輯哪個部分 – seasonqwe

我發現我唯一需要的是最小寬度寬 – seasonqwe

你知道爲什麼第{寬度：120像素;}寬度，當我在屏幕上放大仍然會改變嗎？ – seasonqwe

你應該瞭解media-queries

，所以我不知道什麼是你wan't可能的佈局，但我會告訴你結果，我所做的使用媒體查詢。

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

來源

2015-12-16 04:53:52 Fiido93

我已經知道媒體查詢，點佈局將打亂像您發表上述 – seasonqwe

我告訴你我想在我的崗位 – seasonqwe

更新我發現我的唯一的事情需要的是最小寬度寬 – seasonqwe

其他人告訴你要閱讀媒體查詢是肯定的。並嘗試讀取bootstrap的響應，這是一個是真實的容易理解

這對更新您code..I猜這是你想要的媒體查詢

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

來源

2015-12-16 05:14:31 Mahadevan

我已經知道了，問題是我的桌子會弄亂 – seasonqwe

我告訴你我想更新在我的崗位 – seasonqwe

我發現我唯一需要的是最小寬度寬 – seasonqwe

HTML RWD調整表格

回答

相關問題