Skip to content

Instantly share code, notes, and snippets.

@binaryphile

binaryphile/tel-tabular.css

Last active December 15, 2015 20:49
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 binaryphile/5321689 to your computer and use it in GitHub Desktop.
Save binaryphile/5321689 to your computer and use it in GitHub Desktop.
Download ZIP
tel-tabular
Raw
tel-tabular.css
/* Basic tabular structure */
.tel-tabular {
border-collapse: collapse;
margin-bottom: 1em;
display: table;
width: 100%;
}
.tel-tabular > div, .tel-tabular > li {
display: table-row-group;
width: 100%;
}
.tel-tabular > div > input, .tel-tabular > div > label,
.tel-tabular > div > span, .tel-tabular > div > dl,
.tel-tabular > li > input, .tel-tabular > li > label,
.tel-tabular > li > span, .tel-tabular > li > dl {
display: table-cell;
}
.tel-fieldset > div:nth-child(2) > *:first-child {
padding-top: 1em;
}
.tel-tabular input {
margin-right: 1em;
width: 20em;
}
.tel-tabular input[type=radio], .tel-tabular input[type=checkbox] {
width: auto;
}
.tel-tabular label {
text-align: right;
}
/* Extended cells */
.tel-tabular > div > span > span, .tel-tabular > li > span > span {
display: inline-block;
width: 0;
white-space: nowrap;
}
.tel-tabular .tel-zip {
width: 5em;
}
/* Mock fieldsets */
.tel-fieldset {
border: 1px solid;
}
.tel-fieldset > div {
display: table-row;
padding-right: 0;
}
.tel-fieldset > div > input, .tel-fieldset > div > label,
.tel-fieldset > div > span, .tel-fieldset > div > dl {
display: table-cell;
}
.tel-fieldset > div > span > span {
display: inline-block;
width: 0;
white-space: nowrap;
}
.tel-fieldset .tel-legend {
position: relative;
display: block;
font-weight: bold;
}
.tel-legend > div {
position: absolute;
top: -0.74em;
left: 0.6em;
display: block;
background: white;
padding: 0 0.3em;
white-space: nowrap;
}
.tel-tabular label {
padding-right: 0.3em;
padding-bottom: 1.2em;
}
.tel-fieldset > div > label:first-child,
.tel-fieldset > div > dl:first-child {
padding-left: 0.3em;
}
.tel-tabular dl ol {
list-style: none;
}
dt {
font-weight: bold;
}
.slug {
width: 13em;
}
Raw
tel-tabular.html
<!doctype html>
<html>
<body>
<form>
<p>Styled:</p>
<ul class="tel-tabular">
<li>
<label>Field 1:</label>
<input>
<label>Field 2:</label>
<input>
</li>
<li>
<label>State:</label> <span><span>
<input class="tel-state">
<label>Zip:</label><input class="tel-zip">
</span></span> <span>&nbsp;</span>
<span>Another cell</span>
</li>
<li class="tel-fieldset">
<div class="tel-legend">
<div>Legend</div>
</div>
<div>
<label>Longer label:</label>
<input>
<label>Field 4:</label>
<input>
</div>
<div> <span>&nbsp;</span><span><span>
<input type="checkbox"><label>Checkbox with a long label</label>
</span></span> <span>&nbsp;</span>
<span>&nbsp;</span>
</div>
</li>
<li>
<label>Field 7:</label>
<input>
<label>Field 8:</label>
<input>
</li>
</ul>
</form>
<hr>
<p>Unstyled:</p>
<form>
<ul>
<li>
<label>Field 1:</label>
<input>
<label>Field 2:</label>
<input>
</li>
<li>
<label>State:</label> <span><span>
<input>
<label>Zip:</label><input>
</span></span> <span>&nbsp;</span>
<span>Another cell</span>
</li>
<li>
<div>
<div>Legend</div>
</div>
<div>
<label>Longer label:</label>
<input>
<label>Field 4:</label>
<input>
</div>
<div> <span>&nbsp;</span><span><span>
<input type="checkbox"><label>Checkbox with a long label</label>
</span></span> <span>&nbsp;</span>
<span>&nbsp;</span>
</div>
</li>
<li>
<label>Field 7:</label>
<input>
<label>Field 8:</label>
<input>
</li>
</ul>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment