Question

所以我建立了这个简单的表：

问题是，当我将浏览器调整为一定大小时，它开始看起来像这样：

我已经尝试设置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;
}

Answer 1

您应该在表格上添加包装器div并使其溢出

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

在CSS中

.table-wrapper {
    overflow: scroll;
}

Answer 2

尝试添加 overflow-x：滚动到表格正文

这将使您的表格可滚动，并且还必须定义表格的宽度。

Answer 3

尝试为表格添加以下样式：-

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

调整浏览器大小时，为什么我的表不停留在div中？

3 个答案: