StackOverflow - Removal of padding of nested table

http://stackoverflow.com/questions/37146199/datatables-nested-table-with-collapse-how-remove-padding/37171459#37171459

by Alexandre Azevedo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="container">
	<div class="forms">
		<div id="step1" class="form">
			<form name="form1" action="" method="post">
				<div class="field">
					<label for="name">Name:</label>
					<input type="text" name="name" value="" />
				</div>
				<div class="action">
					<button type="button">Next step</button>
				</div>
			</form>
		</div>
		<div id="step2" class="form">
			<form name="form1" action="" method="post">
				<div class="field">
					<label for="birth">Birth:</label>
					<input type="text" name="name" value="" />
				</div>
				<div class="action">
					<button type="button">Back</button>
					<button type="submit">Finish</button>
				</div>
			</form>
		</div>
	</div>
</div>

CSS

.container {
	position: relative;
	width: 300px;
	height: 400px;
	margin: 0 auto;
	overflow: hidden;
}

.forms {
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	display: inline-flex;
}

.forms.next {
	left: -300px;
}

.form {
	display: inline-block;
	width: 300px;
	height: 400px;
	text-align: center;
}

#step1 {
	background: #EFE;
}

#step2 {
	background: #EEF;
}

.field {
	padding: 10px;
}

JavaScript

$(document).ready(function() {

	alert('foo');

	function steps () {
		console.log('123');
		alert('test');
	};

	// window.steps.prototype.hasLocalStorage = function () {
		//return typeof window.localStorage === "object";
	// };

	// window.steps.prototype.nextStep = function () {
		// if(this.hasLocalStorage()) {
		//	window.localStorage.setItem('name', $('#form1 input[name="name"]').val());
		// }
	// };
	
	 $('#form1 button').click(function() {
	 	return steps();
	 });
});