当屏幕尺寸开始围绕移动区域移动时，我的表（页脚上方）缩小到其内部内容的大小。它的形状有些突出，所以我添加了overflow-x：
但是，这不能解决主要问题，即表格缩小以适合内容。我确实希望平板电脑能缩小尺寸，但是我认为这种情况应该一直发生，最小宽度为635px。
在那一点上，我想要overflow-x：滚动；生效，表格停止收缩。出于某种原因，overflow-x：滚动仅以最小宽度388px开始；（即使此属性在媒体查询中的最小宽度为686px）
我尝试在表上使用最小宽度。尽管这样可以防止其进一步缩小，但会将其推出表格。有什么想法吗？
https://jsfiddle.net/r4ptsohe/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="about.html#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>
答案 0 :(得分：0)
@media (max-width: 686px) {
.table-wrap {
overflow-x: auto;
}
.table-wrap table {
min-width: 685px;
}
}
...似乎可以完成工作。