html - 如何制作单列或滚动的响应式表格？

标签 html css media-queries

嘿， friend 们，我正在尝试对我正在制作的网站上的这个特定页面进行媒体查询。我正在为最大宽度 425px 编写它，我的问题是页面底部附近的表格。我想让它成为一个用于移动目的的单列，但从我读到的内容来看，它更受欢迎，可以滚动。我该怎么做？

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

/*---HEADER---*/

header {
	background: red;
	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-------*/




@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: 30px;
		height: 3px;
		background-color: red;
		float: left;
	}

	/*---MAIN---*/

	header h1 {
		font-size: 3rem;
	}

	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</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>

最佳答案

使用

`overflow-y: scroll;`

在必填部分

关于html - 如何制作单列或滚动的响应式表格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54856317/

上一篇：html - 如何在 One Page Wonder Bootstrap 模板中插入背景图片？

下一篇：html - Navbar Burger(下拉)将内容向下推？

相关文章：

html - 如何在 html/css 中包含透明度？

jquery - Bootstrap Toggle 不适用于 onclick LI 元素

javascript - 在 Jquery 拖放之后将元素移动到位置

css - 另一个 CSS 媒体查询实例在桌面上可以，但在移动设备上不行

html - 艺术家 - 标题在移动 View 媒体查询中突出 div

android - 媒体查询在 Android 上的行为不符合预期

javascript - JS 轮播 - 未捕获的语法错误 : Unexpected identifier

javascript - Jquery Min.Map 文件出现错误 500

javascript - 使用 jQuery 将字符串添加到文本区域

css - 清除后如何显示与其他图像齐平的图像？

©2024 IT工具网  联系我们