css - 溢出-y : scroll; is NOT working on table-6ren

css - 溢出-y : scroll; is NOT working on table

转载作者：行者123 更新时间：2023-11-28 00:18:33

大家好，我的网页底部有一张表格。我正在尝试使其响应。谷歌搜索一分钟后，看起来最流行的方法就是使用 overflow-y: scroll;但是，当我将媒体查询中的表元素定位为最大宽度 425px 并添加此属性时，什么也没有发生。然后我尝试在它周围包裹一个 div 并定位那个 div。依然没有？任何帮助将不胜感激，谢谢:)

html, body {
	margin: 0; 
	padding: 0;
}

/*---HEADER---*/

header {
	background-image: url(../img/support.jpeg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 65vh;
}

.careers-wrapper{
	width: 100%;
	height: 65vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.2);
}

header h1 {
	color: white;
	font-size: 5rem;
	font-family: 'Arvo';
	margin: 0;
}

/*---NAV---*/

nav {
	background-color: white;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	box-shadow: 0px 0px 100px grey;
}

li a {
	text-decoration-line: none;
	color: rgba(102,102,102,0.75);
}

ul {
	margin-right: 30px;
	margin-top: 25px;
}

li {
	display: inline-block;
	font-size: 1.55rem;
	margin-right: 20px;
	font-family: 'Rajdhani';
}

li a:hover {
	cursor: pointer;
	color: #1a1a1a;
	transition: all 0.7s ease;
}

.after:after {
	position: relative;
	left: 12px;
	top: 2px;
	display: inline-block;
	content: "";
	width: 1px;
	height: 20px;
	background-color: rgba(102,102,102,0.25);
}

.logo {
	color: red;
	font-size: 3.7rem;
	margin: 10px;
	opacity: 1;
	margin-left: 30px;
}

/*---FORM---*/

form {
	border: 1px solid black;
	margin-top: 10px;
	margin-left: 30px;
	margin-right: 30px;
	background-color: rgba(102, 102, 102, 0.15);
	border-radius: 5px;
}

.form h2 {
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 0.85);
	font-size: 3rem;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.form h2:after {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 13px;
}

.form h2:before {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 13px;
}

.form .row {
	margin: 20px;
	display: flex;
}

label {
	color: black;
}

label, input {
	font-size: 1.3rem;
	font-family: 'Rajdhani';
}

.label {
	background-color: rgba(102, 102, 102, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
}

.middle {
	margin-left: 15px;
	margin-right: 15px;
}

.row-1 input, .row-3 input {
	flex-basis: 33.33%;
}

.row-2 input {
	width: 100%;
}

.row-4 {
	justify-content: space-between;
}

.row-4 input, .row-4 .label {
	flex-basis: 24%;
}

.row-5  {
	flex-direction: column;
}

.radio {
	margin-top: 10px;
}

.row-6 {
	justify-content: space-between;
}

.row-6 input, .row-6 .label {
	flex-basis: 24%;
}

.row-7 {
	justify-content: space-between;
}

.row-7 .col {
	flex-basis: 50%;
}

.row-8 {
	justify-content: space-between;
}

.row-8 .col {
	flex-basis: 50%;
}

.crime-textarea {
	margin-top: 10px;
	display: none;
	resize: none;
}

#crime-yes:checked ~ textarea {
	display: block;
}

.row-9 {
	justify-content: space-between;
}

.row-9 .label {
	flex-basis: 24%;
}

.row-9 input {
	margin-left: 15px;
	flex-grow: 1;
}

.row-10 {
	justify-content: space-between;
}

.row-10 input, .row-10 .label {
	flex-basis: 24%;
}

.row-11 {
	justify-content: space-between;
}

.row-11 input, .row-11 .label {
	flex-basis: 24%;
}

.row-12 {
	justify-content: space-between;
}

.row-12 input, .row-12 .label {
	flex-basis: 24%;
}

.row-13  {
	justify-content: space-between;
}

.row-13 input, .row-13 .label {
	flex-basis: 24%;
}

h3 {
	font-family: 'Rajdhani';
	text-align: center;
}

/*---TABLE---*/

table {
	width: 95%;
	margin-right: auto;
	margin-left: auto;
	border-spacing: 15px;
}

thead tr {
	background-color: rgba(102, 102, 102, 0.3);
	color: black;
}

thead th {
	font-size: 1.3rem;
	font-family: 'Rajdhani'; 
}

th td {
	margin-right: 10px;
	margin-left: 10px;
}

tbody input {
	width: 100%;
}

#submit {
	background-color: red;
	border: none;
	color: white;
	outline: none;
	font-size: 1.5rem;
	padding: 7px;
	width: 35%;
	align-self: center;
	border-radius: 5px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 5px;
	margin-bottom: 20px;
	display: block;
	transition: all 0.3s ease;
}

#submit:hover {
	cursor: pointer;
	background-color: #cc0000;
}

/*---FOOTER---*/

.footer .wrapper {
	display: flex;
}

.footer div {
	display: inline-block;
	flex-basis: 33.33%;
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 1);
	margin-top: 5px;
}

.footer h1 {
	font-size: 2rem;
	margin-top: 15px;
}

.footer .inner {
	margin-left: 55px;
}

.social .inner {
	margin-left: 45px;
}

.contact .inner {
	margin-left: 35px;
}

.footer .inner:before {
	display: inline-block;
	content: '';
	width: 27.1%;
	height: 2px;
	background-color: rgba(102,102,102, 0.6);
	position: absolute;
	margin-top: 54px;
}


.links .inner:after {
	content: '';
	width: 10.5%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -151px;
}

.social .inner:after {
	content: '';
	width: 5.8%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -171px;
}

.contact .inner:after {
	content: '';
	width: 7.5%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -174.5px;
}

.wrap:before {
	content: '';
	width: 100px;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: 55px;
}

.links a {
	display: block;
	text-decoration-line: none;
	color: rgba(102,102,102, 1);
	font-size: 1.2rem;
	position: relative;
	top: -10px;
	transition: color 0.4s ease;
}

.links a:hover {
	color: red;
}

.contact p {
	position: relative;
	top: -10px;
}

.social i {
	font-size: 1.7rem;
	margin-right: 5px;
	position: relative;
	top: -20px;
	color: rgba(102,102,102, 0.7);
	transition: all 0.4s ease;
}

.social i:hover {
	color: red;
	cursor: pointer;
}

#msg {
	margin-top: -15px;
}

.footer-textarea {
	background-color: rgba(102,102,102, 0.2);
	outline: none;
	color: rgba(102,102,102, 1);
	resize: none;
	width: 102%;
}

.footer button {
	position: absolute;
	margin-left: 23.2%;
	margin-top: -40px;
	border: none;
	font-family: 'Rajdhani';
	font-size: 1.2rem;
	transition: all ease 0.4s;
	outline: none;
}

button:hover {
	cursor: pointer;
	color: red;
}

.dark {
	color: red;
}

.copyright {
	position: absolute;
	background-color: white;
	text-align: center;
	width: 100%;
	margin-bottom: 0;
	font-size: 1.2rem;
	padding-bottom: 4px;
}



/*-------MEDIA QUERIES-------*/



/*---TABLET-LARGE---*/

@media screen and (max-width: 1024px) {

	/*---FOOTER---*/
	
	.footer .inner {
		margin-left: 30px;
	}

	.footer-textarea {
		width: 88%;
	}

	.footer button {
		margin-left: 22.25%;
	}

	.social .inner:after {
		width: 7.8%;
		margin-top: -80px;
		left: 36.25%;
	}

	.links .inner:after {
		width: 14%;
	}

	.contact .inner:after {
		width: 10%;
	}
}


/*------LANDSCAPE-MODE-MOBILE------*/

@media screen and (max-width: 715px) {

	/*---NAV---*/

	nav ul {
		padding-left: 0;
		margin: 0;
	}

	nav li {
		font-size: 1.4rem;
	}

	nav .logo {
		font-size: 2.5rem;
	}

	/*---MAIN---*/

	header, .careers-wrapper {
		height: 100vh;
	}

	form {
		margin-left: 10px;
		margin-right: 10px;
	}

	.row {
		flex-direction: column;
	}

	.middle {
		margin: 0;
	}

	.row-1 input, .row-3 input {
		margin-top: 5px;
		margin-bottom: 5px; 
	}

	.row-4 input, .row-6 input {
		margin-bottom: 7px;
	}

	.row-9 input {
		margin-left: 0;
	}

	#submit {
		width: 90%;
	}

	/*---FOOTER---*/
	
	.contact .inner {
		margin-right: 15px;
	}

	.contact .inner:after {
		margin-top: -171.5px; 
		width: 14%
	}

	.social .inner:after {
		width: 11%
	}

	.links .inner:after {
		width: 20%
	}

	.contact p {
		margin: 5px;
	}

	.footer-textarea {
		position: relative;
		top: -15px;
	}

	.footer button {
		margin-top: -70px;
		margin-left: 19.5%;
	}

}

/*---MOBILE---*/

@media screen and (max-width: 425px) {

	/*---NAV---*/

	.logo {
		font-size: 2.5rem;
		margin-left: 10px;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	nav li {
		display: none;
	}

	.ham-menu {
		width: 55px;
		height: 55px;
		position: fixed;
		right: 0;
		top: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.m1, .m2, .m3 {
		border-radius: 4px;
		margin: 5px;
		width: 35px;
		height: 3px;
		background-color: red;
		float: left;
	}

	/*---MAIN---*/

	header h1 {
		font-size: 4rem;
		text-align: center;
		margin-top: 30px;
	}

	header .careers-wrapper {
		height: 50vh;
	}

	header {
		height: 50vh;
		background-position: -470px;
	}

	form {
		margin-left: 10px;
		margin-right: 10px;
	}

	.row {
		flex-direction: column;
	}

	.middle {
		margin: 0;
	}

	.row-1 input, .row-3 input {
		margin-top: 5px;
		margin-bottom: 5px; 
	}

	.row-4 input, .row-6 input {
		margin-bottom: 7px;
	}

	.row-9 input {
		margin-left: 0;
	}

	#submit {
		width: 90%;
	}
	
	/*---FOOTER---*/

	.footer .wrapper {
		display: flex;
		flex-direction: column;
	}

	.footer div {
		margin: 0;
	}

	.footer h1 {
		font-size: 2rem;
		margin-top: 10px;
	}

	.footer .inner {
		margin: 0;
	}

	.footer .inner:before {
		display: inline-block;
		content: '';
		width: 100%;
		height: 2px;
		background-color: rgba(102,102,102, 0.6);
		position: absolute;
		margin-top: 48px;
	}

	.links .inner:after {
		width: 33%;
		margin-top: -152px;
	}

	.social .inner {
		position: relative;
		top: -10px;
	}

	.social .inner:after {
		content: '';
		width: 18%;
		height: 2px;
		background-color: red;
		position: absolute;
		left: 0;
		margin-top: -44px;
	}

	.contact .inner:after {
		content: '';
		width: 24%;
		height: 2px;
		background-color: red;
		position: absolute;
		margin-top: -148px;
	}

	.links a {
		margin-left: 5px;
	}

	.social h1 {
		margin-bottom: 10px;
	}

	#msg {
		font-size: 1.3rem;
		margin-bottom: 0;
		float: right;
		margin-right: 25.5%;
		position: relative;
		top: 15px;
	}

	.footer button {
		right: 9.25%;
		margin-top: 0.2px;
	}

	.social i {
		font-size: 1.8rem;
		margin-right: 7px;
		position: relative;
		top: -5px;
		left: 5px;
		color: rgba(102,102,102, 0.7);
		transition: all 0.4s ease;
	}

	.footer-textarea {
		width: 88.5%;
		margin-left: 5px;
	}

	.contact p {
		margin: 5px;
		font-size: 1.2rem;
	}

	.copyright {
		background-color: red;
	}

	.copyright span {
		color: white;
		background-color: red;
	}

}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, intitial-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"></div>
						<div class="m2"></div>
						<div class="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" class="middle">
				<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>
			
			<table>
				<h3>Refrences</h3>
				<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>

			<input type="submit" value="Submit" id="submit">
		</form>
	</section>

	<section class="footer">
		<div class="wrapper">
			<div class="links">
				<div class="inner">
					<h1>Quick Links</h1>

					<a href="#">Home</a>
					<a href="#">About</a>
					<a href="#">Services</a>
					<a href="#">Job Openings</a>
					<a href="#">Gallery</a>
				</div>
			</div>

			<div class="social">
				<div class="inner">
					<h1>Social</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>

					<p id="msg">Send some feedback!</p>
					<button name="msg">Send</button>
					<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="type here..."></textarea>
				</div>
			</div>

			<div class="contact">
				<div class="inner" class="wrap">
					<h1>Contact</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>&copy; 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
	</section>
</body>
</html>

最佳答案

这是您应该在 block 元素包装器 (div) 上声明的 overflow-x 属性。我猜你的意思是这样的:

<div style="overflow-x: scroll">
    <table>
        <caption>Refrences</caption>
        <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>

关于css - 溢出-y : scroll; is NOT working on table，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54974002/

文章推荐： html - flex-wrap 不起作用，即使应用了最小宽度

文章推荐： javascript - HTML5 视频样式 CSS？

html - 溢出 y 隐藏中断溢出 x 可见
我有一个 div(蓝色框)，它在父元素(红色框)内的页面上绝对定位，我需要将 overflow-y 设置为隐藏，以便它强制 Y 轴上的溢出内容切掉了，但我希望任何溢出-x 的内容都可见。 HTML:
CSS:溢出-y:滚动；溢出-x:可见
请参阅以下帖子以获取突出显示我的问题和可能的解决方案的图片: CSS overflow-y:visible, overflow-x:scroll 但是，当您实际移动滚动条时，此策略会中断。在建议的实现
CSS 溢出-y :visible, 溢出-x:滚动
我在搜索中看到过几个类似的问题，但要么没有正确回答问题，要么没有给出答案。所以，我再问一次。 .parent { overflow-y:scroll; overflow-x:visible; wid
html - CSS 溢出-y : visible, 溢出-x: 隐藏
我读过这个CSS overflow-x hidden and overflow-y visible (以及很多其他帖子)但我无法在我的具体情况下使用它。我正在使用 slick-slider并想添加下
apache-spark - Spark : Difference between Shuffle Write, Shuffle 溢出(内存)，Shuffle 溢出(磁盘)？
我有以下 Spark 作业，试图将所有内容保留在内存中: val myOutRDD = myInRDD.flatMap { fp => val tuple2List: ListBuffer[(St
c - 溢出
我有疑问两个16位的值加上最大值，16位机会不会溢出？我会详细说明 unsigned short a; unsigned short b; unsigned long c; c=(unsigne
CSS 溢出 : hidden
我有这个 HTML 和 CSS，但“溢出:隐藏”标签在 Firefox 中不起作用。这让我感到难过...有人知道为什么它不起作用吗？是因为A标签不支持overflow标签吗？ #page_sideba
使用大数时 GMP 溢出
我正在开发一个程序，用于在 C++ 中分解非常大的数字(20 位或更多)，并且正在使用 GMP 来处理溢出问题。我的程序对于大约 10 位或更少的数字运行良好，但是当我向它抛出一个 15 位数字时，它
Silverlight: Canvas 溢出
我创建了一个 Canvas ，并在其中放置了一个StackPanel。 StackPanel是水平的，它接受缩略图图像的列表。 Canvas 具有固定的大小。当我放置的缩略图多于Canvas宽度不能容
c - GArray 溢出
当 g_array_append_val() 时会发生什么或 GLib 中的其他附加/前置函数之一，使 GArray 的长度大于 guint (unsigned int) 所能容纳的长度？文档对此没
css - 溢出-x和溢出之间的区别
overflow-x:hidden 和 overflow:hidden; 有什么区别？我所知道的是overflow-x:hidden;禁用水平滚动，但当我使用它时，它不仅仅适用于 Firefox，所
Solr numDocs 溢出
我们正在运行 Solr 来索引大量数据，但遇到了一个非常有趣的问题，我无法在任何地方找到任何帮助。似乎 Solr 使用带符号的 32 位整数来计算索引中当前的文档数。我们刚刚达到了这个数字，我们的
SQL COUNT 溢出
这是我的查询: 从相似性中选择 COUNT(*)，其中 T1Similarity = 0 或 T2Similarity = 0 结果如下: Msg 8115, Level 16, State 2, L
c - 使用位。溢出
int main(void) { char x1 = 0x81; char x2 = 0x1; int a, b; a = x1
javascript - 溢出:隐藏但让内容自动滚动
我有一个 div，其中的内容通过查询的 append() 定期附加到它。随着内容越来越长，最终会溢出div。我不希望在溢出时出现滚动条，但仍然让内容向上滚动以显示下面的新内容。这可能吗？当我使用 o
ios - UITextField 溢出
我为 UITextField 创建了一个简单的子类，它按预期工作。我遇到的唯一问题是当文本值变得太大时，它会溢出到清除按钮中。我似乎无法找到如何仅更改文本的右侧以具有一些填充而不与清除按钮相交的方法
html - 粘性下拉菜单。 (溢出)
我想要一个包括下拉菜单的粘性导航栏。但是，当我将鼠标悬停在它上面时，下拉菜单没有显示。如果我删除 overflow: hidden;在无序列表中，当我向下滚动时，导航栏设法保持在顶部，但是导航栏是不
html - 溢出:隐藏不能始终如一地工作
我正在研究一些按钮。我想要一个翻转状态，我在一个 div 的图像中有这个，溢出:隐藏以隐藏不活动的状态。它有时有效，但有时看起来像这样: 最奇怪的是，当我尝试使用 Chrome Web Inspect
css - 溢出:隐藏属性不适用于伪类前后
基本上，我正在尝试创建一个六边形形状，它内部有一个圆圈，圆圈的多余部分应该被隐藏。演示:https://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=110
css - 溢出-y空白空间错误？
这似乎是一个相当常见且不那么奇特的用例，但我以前没有遇到过。我设置了一支笔，但无法在那里复制它，我正在努力找出原因。 Demo Pen 左侧边栏有一个用于元素列表的自定义滚动窗口，但是虽然设置 ove

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 溢出-y : scroll; is NOT working on table