Skip to content

Instantly share code, notes, and snippets.

Last active August 10, 2020 15:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dahlbyk/51300ca6779cd734e475f48de350159b to your computer and use it in GitHub Desktop.
Save dahlbyk/51300ca6779cd734e475f48de350159b to your computer and use it in GitHub Desktop.
Responsive Table with Inline Form (Grid)
<!DOCTYPE html>
<title>Grid Table Test</title>
<link href="styles.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<th class="grid-actions">&nbsp;</th>
<th class="grid-address">Address</th>
<th class="grid-city">City</th>
<th class="grid-state">State</th>
<th class="grid-zip">ZIP</th>
<td class="grid-actions">🗑</td>
<td class="grid-address"><input name="address" placeholder="Address" value="123 Main St" /></td>
<td class="grid-city"><input name="city" placeholder="City" value="Charlotte" /></td>
<td class="grid-state"><select><option></option><option selected>North Carolina</option></td>
<td class="grid-zip"><input name="zip" placeholder="ZIP" value="28105" /></td>
<td class="grid-actions">🗑</td>
<td class="grid-address"><input name="address" placeholder="Address" value="100 Michigan Ave" /></td>
<td class="grid-city"><input name="city" placeholder="City" value="Chicago" /></td>
<td class="grid-state"><select><option></option><option selected>Illinois</option><option>North Carolina</option></td>
<td class="grid-zip"><input name="zip" placeholder="ZIP" value="60601" /></td>
<td class="grid-actions">🗑</td>
<td class="grid-address"><input name="address" placeholder="Address" /></td>
<td class="grid-city"><input name="city" placeholder="City" /></td>
<td class="grid-state"><select><option></option><option>North Carolina</option></td>
<td class="grid-zip"><input name="zip" placeholder="ZIP" /></td>
input, select {
width: 100%;
display: inline-block;
box-sizing: border-box;
height: 1.5em;
table {
width: 100%;
display: block;
tbody tr {
border-top: 1px solid;
padding: 5px 0;
tr {
display: grid;
"actions address address"
"actions city city"
"actions state zip"
/ 20px 2fr 1fr;
@media (min-width: 400px) {
tr {
"actions address address address"
"actions city state zip"
/ 20px 2fr 2fr 1fr;
@media (min-width: 450px) {
tr {
"actions address city state zip"
/ 20px 3fr 2fr 2fr 1fr;
color: transparent;
th {
text-align: left;
td {
display: flex;
flex-direction: column;
justify-content: center;
tr .grid-actions { grid-area: actions; }
tr .grid-address { grid-area: address; }
tr .grid-city { grid-area: city; }
tr .grid-state { grid-area: state; }
tr .grid-zip { grid-area: zip; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment