在HTML表格/表单上垂直滚动时出现空白-是否可能强制分页符？不是宽度问题
我删除了我之前的问题，因为我认为这个问题与我现在的想法相比具有误导性。我在移动查看中垂直滚动时遇到空白问题。我尝试了一些方法，包括搞乱视口和css，唯一有帮助的方法是从表中删除行，使其小于一定的大小。我肯定有办法解决这个问题，但我一直没能弄明白。桌子的宽度似乎没有问题，我已经尝试了一些方法来改变这一点，但没有任何效果。由于表单的垂直长度，这似乎是一个强制的分页符。以下是HTML：在HTML表格/表单上垂直滚动时出现空白-是否可能强制分页符？不是宽度问题,html,forms,html-table,Html,Forms,Html Table,我删除了我之前的问题，因为我认为这个问题与我现在的想法相比具有误导性。我在移动查看中垂直滚动时遇到空白问题。我尝试了一些方法，包括搞乱视口和css，唯一有帮助的方法是从表中删除行，使其小于一定的大小。我肯定有办法解决这个问题，但我一直没能弄明白。桌子的宽度似乎没有问题，我已经尝试了一些方法来改变这一点，但没有任何效果。由于表单的垂直长度，这似乎是一个强制的分页符。以下是HTML： <!DOCTYPE html> <html> <head><meta na
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="height=device height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script>
<style>
body {
font-family: Arial;
background-color: MidnightBlue;
color: GhostWhite;
display: inline-block;
}
.modal {
width: 100%;
height: 100%;
border: 2px solid #ccc;
border-radius: 4px;
background-color: GhostWhite;
color: Black;
}
input[type=text], select {
width: 100%;
height: 100px;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 2em;
}
input[type=number], select {
width: 100%;
height: 100px;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 2em;
}
input[type=date], select {
width: 100%;
height: 100px;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 2em;
}
input[type=time], select {
width: 100%;
height: 100px;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 2em;
}
input[type=submit] {
width: 100%;
background-color: DarkRed;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
}
input[type=radio] {
width: 50px;
height: 50px;
}
input[type=button] {
width: 150px;
height: 50px;
font-size: 30px;
display: block;
margin-left: auto;
}
#Address th, #Address td {
border: 2px solid #ddd;
font-size: 60px;
font-weight: bold;
width: 20%;
text-align: center;
}
#Inspection {
table-layout: auto;
height: 100%;
}
#Inspection th, #Inspection td {
border: 2px solid #ddd;
}
#Inspection th {
font-size: 30px;
text-align: left;
}
#Inspection td {
font-size: 15px;
text-align: center;
}
#customerForm {
font-size: 2em;
font-weight: Bold;
}
::placeholder {
font-size: 1em;
}
</style>
<body>
<center><h1><big><big>DRIVER VEHICLE INSPECTION REPORT</big></big></h1>
<h5>AS REQUIRED BY THE D.O.T. FEDERAL MOTOR CARRIER SAFETY REGULATIONS</h5></center><br>
<form id="customerForm" action="/action_page.php">
<div class="container">
<label for="carrier">Carrier:</label>
<select id="carrier" name="carrier" required>
<option value="My Company">My Company</option>
</select><br>
<table id="Address" width="100%">
<tr>Select Your Terminal Location:</tr>
<tr>
<th>PDX</th>
<th>EUG</th>
<th>SEA</th>
<th>SFO</th>
</tr>
<tr>
<td><input type="radio" id="PDX" name="Address" value="PDX"required></td>
<td><input type="radio" id="EUG" name="Address" value="EUG"required></td>
<td><input type="radio" id="SEA" name="Address" value="SEA"required></td>
<td><input type="radio" id="SFO" name="Address" value="SFO"required></td>
</tr>
</table><br>
<label for="Driver name">Driver Performing Inspection:</label>
<input type="text" id="dname" name="drivername" placeholder="Your full name" required><br>
<label for="Driver Employee ID number">Driver's Employee Number:</label><br>
<input type="number" id="dnum" name="drivernumber" placeholder="Your employee number" required><br><br>
<label for="Date">Date Performed:</label><br>
<input type="date" id="date" name="date" required><br><br>
<label for="Time">Time Performed:</label><br>
<input type="time" id="time" name="time" value="now" required><br><br>
<label for="Tractor/Truck#">Tractor / Truck #:</label><br>
<input type="number" id="tractor/truck" name="tractor/truck" placeholder="Your vehicle number" required><br><br>
<label for="Odometer">Odometer Reading:</label><br>
<input type="number" id="odom" name="odometer reading" placeholder="Vehicle odometer reading" required><br><br>
<center><h3>Tractor / Truck Inspection:</h3></center>
<table id="Inspection" width="100%">
<tr>
<th> </th>
<th>Satisfactory</th>
<th>Unsatisfactory</th>
</tr>
<tr>
<th><label for="Air Compressor">Air Compressor</label></th>
<td><input type="radio" id="air compressor" name="AirCompressor" value="Sat" required></td>
<td><input type="radio" id="air compressor2" name="AirCompressor" value="Unsat" required></td>
</tr>
<tr>
<th><label for="Air Lines">Air Lines</label></th>
<td><input type="radio" id="air lines" name="AirLines" value="Sat" required></td>
<td><input type="radio" id="air lines2" name="AirLines" value="Unsat" required></td>
</tr>
<tr>
<th><label for="Battery">Battery</label></th>
<td><input type="radio" id="Battery" name="Battery" value="Sat" required></td>
<td><input type="radio" id="Battery2" name="Battery" value="Unsat" required></td>
</tr>
<tr>
<th><label for="Belts and Hoses">Belts and Hoses</label></th>
<td><input type="radio" id="Belts and Hoses" name="BeltsandHoses" value="Sat" required></td>
<td><input type="radio" id="Belts and Hoses2" name="BeltsandHoses" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Body">Body</label></th>
<td><input type="radio" id="Body" name="Body" value="Sat"required></td>
<td><input type="radio" id="Body2" name="Body" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Brake Accessories">Brake Accessories</label></th>
<td><input type="radio" id="Brake Accessories" name="BrakeAccessories" value="Sat"required></td>
<td><input type="radio" id="Brake Accessories2" name="BrakeAccessories" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Brakes, Parking">Brakes, Parking</label></th>
<td><input type="radio" id="Brakes, Parking" name="BrakesParking" value="Sat"required></td>
<td><input type="radio" id="Brakes, Parking2" name="BrakesParking" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Brakes, Service">Brakes, Service</label></th>
<td><input type="radio" id="Brakes, Service" name="BrakesService" value="Sat"required></td>
<td><input type="radio" id="Brakes, Service2" name="BrakesService" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Clutch">Clutch</label></th>
<td><input type="radio" id="Clutch" name="Clutch" value="Sat"required></td>
<td><input type="radio" id="Clutch2" name="Clutch" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Coupling Devices">Coupling Devices</label></th>
<td><input type="radio" id="Coupling Devices" name="CouplingDevices" value="Sat"required></td>
<td><input type="radio" id="Coupling Devices2" name="CouplingDevices" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Defroster/Heater">Defroster/Heater</label></th>
<td><input type="radio" id="Defroster/Heater" name="DefrosterHeater" value="Sat"required></td>
<td><input type="radio" id="Defroster/Heater2" name="DefrosterHeater" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Drive Line">Drive Line</label></th>
<td><input type="radio" id="Drive Line" name="DriveLine" value="Sat"required></td>
<td><input type="radio" id="Drive Line2" name="DriveLine" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Engine">Engine</label></th>
<td><input type="radio" id="Engine" name="Engine" value="Sat"required></td>
<td><input type="radio" id="Engine2" name="Engine" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Exhaust">Exhaust</label></th>
<td><input type="radio" id="Exhaust" name="Exhaust" value="Sat"required></td>
<td><input type="radio" id="Exhaust2" name="Exhaust" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Fifth Wheel">Fifth Wheel</label></th>
<td><input type="radio" id="Fifth Wheel" name="FifthWheel" value="Sat"required></td>
<td><input type="radio" id="Fifth Wheel2" name="FifthWheel" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Fluid Levels">Fluid Levels</label></th>
<td><input type="radio" id="Fluid Levels" name="FluidLevels" value="Sat"required></td>
<td><input type="radio" id="Fluid Levels2" name="FluidLevels" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Frame and Assembly">Frame and Assembly</label></th>
<td><input type="radio" id="Frame and Assembly" name="FrameandAssembly" value="Sat"required></td>
<td><input type="radio" id="Frame and Assembly2" name="FrameandAssembly" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Front Axle">Front Axle</label></th>
<td><input type="radio" id="Front Axle" name="FrontAxle" value="Sat"required></td>
<td><input type="radio" id="Front Axle2" name="FrontAxle" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Fuel Tanks">Fuel Tanks</label></th>
<td><input type="radio" id="Fuel Tanks" name="FuelTanks" value="Sat"required></td>
<td><input type="radio" id="Fuel Tanks2" name="FuelTanks" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Horn">Horn</label></th>
<td><input type="radio" id="Horn" name="Horn" value="Sat"required></td>
<td><input type="radio" id="Horn2" name="Horn" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Lights">Lights -<br> Head/Stop<br> Tail/Dash<br> Turn Indicators<br> Clearance/Marker</label></th>
<td><input type="radio" id="Lights" name="Lights" value="Sat"required></td>
<td><input type="radio" id="Lights2" name="Lights" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Mirrors">Mirrors</label></th>
<td><input type="radio" id="Mirrors" name="Mirrors" value="Sat"required></td>
<td><input type="radio" id="Mirrors2" name="Mirrors" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Muffler">Muffler</label></th>
<td><input type="radio" id="Muffler" name="Muffler" value="Sat"required></td>
<td><input type="radio" id="Muffler2" name="Muffler" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Oil Pressure">Oil Pressure</label></th>
<td><input type="radio" id="Oil Pressure" name="OilPressure" value="Sat"required></td>
<td><input type="radio" id="Oil Pressure2" name="OilPressure" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Radiator">Radiator</label></th>
<td><input type="radio" id="Radiator" name="Radiator" value="Sat"required></td>
<td><input type="radio" id="Radiator2" name="Radiator" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Rear End">Rear End</label></th>
<td><input type="radio" id="Rear End" name="RearEnd" value="Sat"required></td>
<td><input type="radio" id="Rear End2" name="RearEnd" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Reflectors">Reflectors</label></th>
<td><input type="radio" id="Reflectors" name="Reflectors" value="Sat"required></td>
<td><input type="radio" id="Reflectors2" name="Reflectors" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Safety Equipment">Safety Equipment -<br> Fire Extinguisher<br> Flags/Flares/Fusees<br> Reflective Triangles<br> Spare Bulbs and Fuses<br> Spare Seal Beam</label></th>
<td><input type="radio" id="Safety Equipment" name="SafetyEquipment" value="Sat"required></td>
<td><input type="radio" id="Safety Equipment2" name="SafetyEquipment" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Starter">Starter</label></th>
<td><input type="radio" id="Starter" name="Starter" value="Sat"required></td>
<td><input type="radio" id="Starter2" name="Starter" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Steering">Steering</label></th>
<td><input type="radio" id="Steering" name="Steering" value="Sat"required></td>
<td><input type="radio" id="Steering2" name="Steering" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Suspension System">Suspension System</label></th>
<td><input type="radio" id="Suspension System" name="SuspensionSystem" value="Sat"required></td>
<td><input type="radio" id="Suspension System2" name="SuspensionSystem" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Tire Chains">Tire Chains</label></th>
<td><input type="radio" id="Tire Chains" name="TireChains" value="Sat"required></td>
<td><input type="radio" id="Tire Chains2" name="TireChains" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Tires">Tires</label></th>
<td><input type="radio" id="Tires" name="Tires" value="Sat"required></td>
<td><input type="radio" id="Tires2" name="Tires" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Transmission">Transmission</label></th>
<td><input type="radio" id="Transmission" name="Transmission" value="Sat"required></td>
<td><input type="radio" id="Transmission2" name="Transmission" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Trip Recorder">Trip Recorder</label></th>
<td><input type="radio" id="Trip Recorder" name="TripRecorder" value="Sat"required></td>
<td><input type="radio" id="Trip Recorder2" name="TripRecorder" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Wheels and Rims">Wheels and Rims</label></th>
<td><input type="radio" id="Wheels and Rims" name="WheelsandRims" value="Sat"required></td>
<td><input type="radio" id="Wheels and Rims2" name="WheelsandRims" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Windows">Windows</label></th>
<td><input type="radio" id="Windows" name="Windows" value="Sat"required></td>
<td><input type="radio" id="Windows2" name="Windows" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Windshield Wipers">Windshield Wipers</label></th>
<td><input type="radio" id="Windshield Wipers" name="WindshieldWipers" value="Sat"required></td>
<td><input type="radio" id="Windshield Wipers2" name="WindshieldWipers" value="Unsat"required></td>
</tr>
<tr>
<th><label for="Other">Other</label></th>
<td><input type="radio" id="Other" name="Other" value="Sat"required></td>
<td><input type="radio" id="Other2" name="Other" value="Unsat"required></td>
</tr>
</table><br>
<label for="modal-heading">Sign in the box below:</label>
<div class="modal">
<div class="signature-panel"></div>
<div class="controls-panel">
<input type="button" class="btn btn--secondary clear-button" value="Clear"/>
</div>
</div>
<img id="rendered" src="" style="display:none">
<input type="Submit" class="Submit" value="Submit and close" onclick="renderSignature();saveImage();"/>
</div>
</form>
</body>
<script>
$('.signature-panel').jSignature();
$('.clear-button').on('click', function(e) {
e.preventDefault();
$('.signature-panel').jSignature("reset");
});
</script>
</html>
身体{
字体系列：Arial；
背景色：午夜蓝；
颜色：鬼白色；
显示：内联块；
}
.莫代尔{
宽度：100%；
身高：100%；
边框：2个实心#ccc；
边界半径：4px；
背景色：鬼影白；
颜色：黑色；
}
输入[类型=文本]，选择{
宽度：100%；
高度：100px；
填充：12px 20px；
利润率：8px0；
显示：块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
字号：2em；
}
输入[类型=编号]，选择{
宽度：100%；
高度：100px；
填充：12px 20px；
利润率：8px0；
显示：块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
字号：2em；
}
输入[类型=日期]，选择{
宽度：100%；
高度：100px；
填充：12px 20px；
利润率：8px0；
显示：块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
字号：2em；
}
输入[类型=时间]，选择{
宽度：100%；
高度：100px；
填充：12px 20px；
利润率：8px0；
显示：块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
字号：2em；
}
输入[类型=提交]{
宽度：100%；
背景色：暗色；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
边界半径：4px；
光标：指针；
字号：1em；
}
输入[类型=收音机]{
宽度：50px；
高度：50px；
}
输入[类型=按钮]{
宽度：150px；
高度：50px；
字体大小：30px；
显示：块；
左边距：自动；
}
#地址th，#地址td{
边框：2px实心#ddd；
字体大小：60px；
字体大小：粗体；
宽度：20%；
文本对齐：居中；
}
#检查{
表格布局：自动；
身高：100%；
}
#检验th，#检验td{
边框：2px实心#ddd；
}
#检验{
字体大小：30px；
文本对齐：左对齐；
}
#检查td{
字体大小：15px；
文本对齐：居中；
}
#顾客表演{
字号：2em；
字体大小：粗体；
}
：：占位符{
字号：1em；
}
司机车辆检查报告
根据D.O.T.联邦汽车承运人安全条例的要求
承运人：
我的公司
选择您的终端位置：
PDX
欧盟政府
大海
SFO
执行检查的驾驶员：
司机员工编号：
执行日期：
执行时间：
拖拉机/卡车：
里程表读数：
拖拉机/卡车检查：
满意的
不尽人意
空气压缩机
航空公司
电池
皮带和软管
身体
制动器附件
刹车，停车
行车制动器
离合器
耦合装置
除霜器/加热器
传动线
引擎
耗尽
第五轮
液位
框架和组件
前桥
油箱
喇叭
灯-
车头/停车
车尾/仪表板
转向指示灯
间隙/标记
镜子
消声器
油压
散热器
后端
反射器
安全设备-
灭火器
旗帜/照明弹/保险丝
反光三角形
备用灯泡和保险丝
备用密封梁
开胃菜
驾驶
悬挂系统
轮胎链
轮胎
传输
行车记录仪
车轮和轮辋
窗户
挡风玻璃刮水器
其他
在下面的框中签名：
$（'.signature panel'）.jSignature（）；
$（'.clear button'）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
$（'.signature panel'）.jSignature（“重置”）；
});
我需要在删除空白的同时保持窗体的外观。请帮忙 请在你的问题中发布一篇强调最小值的文章。为了回音@j08691-经常剥离代码以仅显示MCVE有助于你在调试过程中对其进行调试。我试图一块一块地剥离代码，但没有发现问题，除了删除大量表行以减小整个表单的大小之外，这就解决了问题。鉴于问题在于表格的大小，我认为您需要提供的大部分信息。唯一不需要的是将信息传输到我的数据库的脚本，我现在将删除该脚本。还添加了一个代码链接。如果有人至少能提出可能的错误，我很乐意自己做腿部工作，我只是不知道从哪里开始。我甚至不知道该怎么称呼这种现象，我能找到的最好的方法就是橡皮筋。我已经尝试了很多不同的东西，现在我仍然在多个移动设备上得到这个。我能看到的唯一一件事就是表单的整体大小。