在底部显示滚动条的表格，当它不应该存在时

Question

我正在处理一个表，当存在特定行时，它会显示滚动条。

在下面的代码中，第一行和第二行一切正常。但当我把第三行放在foreach中时，底部会出现滚动条。

这种情况只发生在桌面上。在手机上没有问题。

注意：有些外部CSS我无法处理！

HTML:

<div id="content">
<div id="header">
</div>
<div class="formcontent">
<form method="post">
<input type="hidden" name="action" value="order_received"/>
<div class="form-table">
<h1 class="center">HEADING HERE</h1>
<table class="tagtable listwithfilterbefore">
<tr class="oddeven">
<td class="left">First row</td>
<td class="left"><input type="text" class="minwidth200imp" name="customer" value=""/></td>
</tr>
<tr class="oddeven">
<td class="left">Second row</td>
<td class="left">
<select name="payment_mode" class="minwidth200imp">
<option value=""></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</td>
</tr>
<?php
foreach ($object->getExternalProducts() as $result) {
print '<tr class="oddeven">';
print '<td class="left">' . $result->label . '</td>';
print '<td class="left"><input type="number" class="minwidth200imp" name="' .
$result->rowid . '" value="" />&nbsp;' . $langs->trans('Pcs') . '</td>';
print '<tr>';
}
?>
</table>
</div>
</form>
</div>
<div id="footer_container">
<div id="footer">
FOOTER HERE
</div>
</div>
</div>

CSS：

@media only screen and (min-width: 601px) {
#content {
background-color: #E52D7A;
position: absolute;
left: 0;
top: 0;
width: 100vw;
min-height: 750px;
z-index: 100;
font-family: Montserrat, Sans-serif;
font-weight: 600;
}
#header {
background-image: url("../img/bgr.png");
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: 100% 100%;
position: relative;
text-align: center;
}
.formcontent {
position: relative;
padding-top: 50px;
padding-bottom: 100px;
text-align: center;
}
.form-table {
background: #fff;
margin: 0 auto;
padding: 20px;
border-radius: 20px;
max-width: 570px;
text-align: left;
}
h1 {
padding: 10px;
}
h2 {
padding: 10px;
}
#footer_container {
background: #6E0E5E; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(top, #6E0E5E); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
background: -webkit-linear-gradient(top, #6E0E5E);
background: -webkit-linear-gradient(top, #6E0000);
background: -webkit-linear-gradient(top, #6E0E);
background: -webkit-linear-gradient(top, #6E0E5E);
background: black linear-gradient(#E52D7A 0, #6E0E5E 100%); /* Standard syntax */
width: 100%;
min-width: 100%;
bottom: 0;
left: 0;
position: fixed;
}
#footer {
line-height: 60px;
margin: 0 auto;
text-align: center;
}
}
@media only screen and (max-width: 601px) {
#content {
background-color: #E52D7A;
position: absolute;
left: 0;
top: 0;
width: 100vw;
min-height: 750px;
z-index: 100;
font-family: Montserrat, Sans-serif;
font-weight: 600;
}
#header {
background-image: url("../img/bgr.png");
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: 100% 100%;
position: relative;
text-align: center;
}
.responsive {
width: 100%;
height: auto;
}
.formcontent {
position: relative;
padding-top: 50px;
padding-bottom: 100px;
text-align: center;
}
.form-table {
background: #fff;
margin: 0 auto;
padding: 20px;
border-radius: 20px;
max-width: 90%;
text-align: left;
}
table tr {
display: flex;
flex-direction: column;
width: 100%;
}
h1 {
padding: 10px;
}
h2 {
padding: 10px;
}
#footer_container {
background: #6E0E5E; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(top, #6E0E5E); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
background: -webkit-linear-gradient(top, #6E0E5E);
background: -webkit-linear-gradient(top, #6E0000);
background: -webkit-linear-gradient(top, #6E0E);
background: -webkit-linear-gradient(top, #6E0E5E);
background: #E52D7A linear-gradient(#E52D7A 0, #6E0E5E 100%); /* Standard syntax */
width: 100%;
min-width: 100%;
bottom: 0;
left: 0;
position: fixed;
}
#footer {
line-height: 60px;
margin: 0 auto;
text-align: center;
}
}

链接：https://dev.blacktiehost.com/dolibarr2/htdocs/orderForm.php

Answer 1

我有4K显示器，可以看到滚动条。放入CSStable {max-width: 100%;}不起作用。然而，根据上面的建议，这个代码起了作用：

html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #a3a6a3;
}