Responsive Table
As the viewport gets smaller, the table width will shrink. However depending on how many columns you have the table which reach a minimum size.
Source Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div>
<table class="table table-striped" style="margin-top:25px; text-align:center; width:100%; height:50%" border="1">
<tr>
<td align="center" colspan="5" style="font-size: 16px; font-weight: 700; color: cadetblue">Responsive Table</td>
</tr>
<tr>
<td>
<label>FirstName *</label>
</td>
<td>
<input id="FirstName" name="FirstName" required="required" type="text" /></td>
<td></td>
<br />
<td>
<label>LastName *</label>
</td>
<td>
<input id="LastName" name="LastName" required="required" type="text" /></td>
<br />
</tr>
<tr>
<td>
<label>Email *</label>
</td>
<td>
<input id="Email" name="Email" required="required" type="text" /></td>
<td></td>
<td>
<label>Re-Enter Email *</label>
</td>
<td>
<input id="Re-Enter Email" name="Re-Enter Email" required="required" type="text" /></td>
</tr>
<tr>
<td>
<label>Mobile Number *</label>
</td>
<td>
<input id="Mobile Number" name="Mobile Number" required="required" type="number" /></td>
<td></td>
<td>
<label>Address *</label>
</td>
<td>
<input id="Address" name="Address" required="required" type="text" /></td>
</tr>
<tr>
<td>
<label>Country *</label>
</td>
<td>
<input id="Country" name="Country" required="required" type="text" /></td>
<td>
</td>
<td>
<label>State *</label>
</td>
<td>
<input id="State" name="State" required="required" type="text" /></td>
</tr>
<tr>
<td align="center" colspan="5" style="font-size: 14px">
<input id="Checkbox1" type="checkbox" />I Agree all terms and conditions *
</td>
</tr>
<tr>
<td align="center" colspan="5" style="font-size: 14px">
<button value="submit" style="width: 150px; height: 35px; background-color: burlywood; color: white; font-size: 24px">Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Cascading stylesheet(css)
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
/*padding-left: 50%;*/
/*padding-left: 20%;*/
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px; }
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
}
Result
Fig(1.1)Table in Full width window
Fig(1.1) When you minimize your browser.Table width will shrink.
Thanks for visiting....