Skip to content

Instantly share code, notes, and snippets.

@dahlbyk

dahlbyk/index.html

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.
Download ZIP
Responsive Table with Inline Form (Grid)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Grid Table Test</title>
<link href="styles.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<table>
<thead>
<tr>
<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>
</tr>
</thead>
<tbody>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
</tbody>
</table>
</body>
</html>
Raw
styles.css
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;
grid-template:
"actions address address"
"actions city city"
"actions state zip"
/ 20px 2fr 1fr;
}
@media (min-width: 400px) {
tr {
grid-template:
"actions address address address"
"actions city state zip"
/ 20px 2fr 2fr 1fr;
}
}
@media (min-width: 450px) {
tr {
grid-template:
"actions address city state zip"
/ 20px 3fr 2fr 2fr 1fr;
}
input::placeholder
{
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