堆棧內存溢出
  簡體   English   中英

調整瀏覽器大小時，為什么我的表格沒有留在它的 div 中？

[英]Why isnt my table staying in it's div, when resizing my browser?

 原文  2019-11-14 14:13:38  4   3    javascript/ jquery/ html/ css/ web-deployment

問題描述

所以我建立了這個簡單的表： 調整大小前的表格

問題是，當我將瀏覽器調整到一定數量時，它開始看起來像這樣：

調整大小時的表格

我已經嘗試設置 tablel-layout:fixed。 現在它可以正確調整大小，但表格的內部完全錯誤，如您所見： 帶有表格布局的表格：固定

所以現在我真的不知道如何解決這個問題以及從哪里開始。 有人有想法嗎？ 這是到目前為止的代碼：

<html lang="en">
  <meta content="width=device-width, initial-scale=1.0">
  <head>
    <title>TestTable</title>
    <link rel="stylesheet" href="..//css/GeneralStyle.css">
    <link rel="stylesheet" href="..//css/RFQ.css">
    <script src="..//js/RFQ.js"></script>
    <meta charset="utf-8" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <div id = "content">
      <div id="main2" class="main">
        <h1 id="x2" class="x">X</h1>
        <h1 class="title" id="T2">Project specification and target price</h1>
        <table id="table_021">
          <tr>
            <th><b></b></th>
            <th><b>Product Code</b></th>
            <th><b>Extra Options</b></th>
            <th><b>Quantity</b></th>
            <th><b>Expected Offer Price (incl. Accessories)</b></th>
            <th><b>Currency</b></th>
            <th><b>Customer price </b></th>
          </tr>
          <tr>
            <td><b>Code1</b> </td>
            <td style="width: 40%">
              <table style="width: 400px; margin-left: 0;">
                <tr>
                  <td>XXX</td>
                  <td style="width: 17%"><input maxlength="4"></input></td>
                  <td>-</td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td>-</td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%">-Y</td>
                </tr>
              </table>
            </td>
            <td>
              <table style="width: 180px; margin-left: 0;">
                <tr>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                </tr>
                <tr>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                </tr>
              </table>
            </td>
            <td><input id="a2" type="number" min="0"></td>
            <td><input id="a3" type="number" min="0"></td>
            <td><select name="currency1" id="currency1">
              <option value="1">Euro € </option>
              <option value="2">USD $ </option>
            </select></td>
            <td><input id="a4" type="number" min="0"></td>
          </tr>
          <tr>
            <td><b>Code2</b></td>
            <td style="width: 40%">
              <table style="width: 400px; margin-left: 0;">
                <tr>
                  <td>XXX</td>
                  <td style="width: 17%"><input maxlength="4"></input></td>
                  <td>-</td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td>-</td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%">-Y</td>
                </tr>
              </table>
            </td>
            <td style="width: 18%">
              <table style="width: 180px; margin-left: 0;">
                <tr>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                </tr>
                <tr>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                </tr>
              </table>
            </td>
            <td><input id="a6" type="number" min="0"></td>
            <td><input id="a7" type="number" min="0"></td>
            <td><select name="currency2" id="currency2">
              <option value="1">Euro € </option>
              <option value="2">USD $ </option>
            </select></td>
            <td><input id="a8" type="number" min="0"></td>
          </tr>
          <tr>
            <td><b>Code3</b></td>
            <td style="width: 40%">
              <table style="width: 400px; margin-left: 0;">
                <tr>
                  <td>XXX</td>
                  <td style="width: 17%"><input maxlength="4"></input></td>
                  <td>-</td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td>-</td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%">-Y</td>
                </tr>
              </table>
            </td>
            <td>
              <table style="width: 180px; margin-left: 0;">
                <tr>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                </tr>
                <tr>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                </tr>
              </table>
            </td>
            <!--<td><form id="aa9"><input id="a9" type="text"></input></form></td>-->
            <td><input id="a10" type="number" min="0"></td>
            <td><input id="a11" type="number" min="0"></td>
            <td><select name="currency3" id="currency3">
              <option value="1">Euro € </option>
              <option value="2">USD $ </option>
            </select></td>
            <td><input id="a12" type="number" min="0"></td>
          </tr>
          <tr>
            <td><b>Code4</b></td>
            <td style="width: 40%">
              <table style="width: 400px; margin-left: 0;">
                <tr>
                  <td>XXX</td>
                  <td style="width: 17%"><input maxlength="4"></input></td>
                  <td>-</td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td>-</td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%"><input maxlength="1"></input></td>
                  <td style="width: 8%">-Y</td>
                </tr>
              </table>
            </td>
            <td>
              <table style="width: 180px; margin-left: 0;">
                <tr>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                </tr>
                <tr>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                  <td><input maxlength="3"></input></td>
                </tr>
              </table>
            </td>
            <!--<td><form id="aa13"><input id="a13" type="text"></input></form></td>-->
            <td><input id="a14" type="number" min="0"></td>
            <td><input id="a15" type="number" min="0"></td>
            <td><select name="currency4" id="currency4">
              <option value="1">Euro € </option>
              <option value="2">USD $ </option>
            </select></td>
            <td><input id="a16" type="number" min="0"></td>
          </tr>
        </table>
        <br>
        <button id="c2" class="c next Button" onclick="check2()">Check and transmit</button>
      </div>
    </div>
  </div>
 </body>
</html>

table {
  width: 80%;
  border-collapse: collapse;
  color: gray;
  margin-left: 5%;
}
th, td {
  border: 1px solid #ddd;
  opacity:0.9;
  text-align: center;
  padding: 5px;
}
th {
  background-color: white;
}
.main {
  float: left;
  width: 75%;
  margin-top: 1%;
  border-radius: 5px;
  background-color: #ffffff;
  margin-left: 2%;
}
.in {
  font-size: 120%;
  text-align: right;
  width: 80%;
}
#profit, .title {
  color: gray;
  padding-left: 2%;
}
.x {
  color: gray;
  float: right;
  margin-right: 3%;
}
.x, .title:hover {
  cursor: pointer;
}
form  {
  margin:0;
}
#newmain {
  margin-top: 180px;
  background-color: white;
}
#optional {
  display: none;
}
#x1 {
  display: block;
}
.c {
  float: right;
}
.overlay-content {
  top: 2%;
}
#cmd {
  float: right;
  margin-top: 180px;
  margin-left: 80%;
  position: fixed;
}
/* did not work out 
#table_021{
table-layout:fixed; 
}
*/
.transmitsuccess {
  color:green;
}

3 個解決方案

解決方案1
 2 已采納  2019-11-14 14:23:09

你應該在你的桌子上添加一個包裝器div並讓它溢出

<div class="table-wrapper">
   <table></table>
</div>

在 CSS

.table-wrapper {
    overflow: scroll;
}

解決方案2
 2  2019-11-14 14:26:18

嘗試添加溢出-x：滾動到表格的主體

這將使您的表格可滾動，您還必須定義表格的寬度。

解決方案3
 1  2019-11-14 14:16:40

嘗試為表添加以下 styles：-

table {
    width: 80%;
    border-collapse: collapse;
    color: gray;
    margin-left: 5%;
    overflow: scroll;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 調整網頁瀏覽器大小時如何防止調整div大小？ 為什么我的jquery無法更改div？ 調整瀏覽器屏幕大小正在弄亂我的div偏移量 為什么我的 function 沒有輸出到我的桌子上？ 當我調整瀏覽器大小時，為什么我的 div 會重疊？ 為什么我的按鈕沒有在 div 上顯示值 我的javascript沒有出現在我的瀏覽器中？ 為什么我的JavaScript不起作用？ 為什么我的繼承無效？ 為什么我的代碼不起作用？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM