Skip to content

Instantly share code, notes, and snippets.

@mosra

mosra/elastic.html

Created August 30, 2011 20:24
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mosra/1181921 to your computer and use it in GitHub Desktop.
Save mosra/1181921 to your computer and use it in GitHub Desktop.
Download ZIP
Percentage / fixed size combination in HTML tables
Raw
elastic.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style type="text/css">
.special:after {
content: "";
display: block;
width: 100px;
height: 0px;
}
</style>
min-width:
<div style="width: 500px; display: table;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ffcc99; min-width: 100px;">100px</div>
<div style="width: 30%; display: table-cell;">30%</div>
<div style="width: 70%; display: table-cell; background-color: #ffcc99;">70%</div>
</div>
</div>
CSS :after:
<div style="width: 500px; display: table;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ffcc99;" class="special">100px</div>
<div style="width: 30%; display: table-cell;">30%</div>
<div style="width: 70%; display: table-cell; background-color: #ffcc99;">70%</div>
</div>
</div>
&lt;div&gt;:
<div style="width: 500px; display: table;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ffcc99;"><div style="width: 100px;">100px</div></div>
<div style="width: 30%; display: table-cell;">30%</div>
<div style="width: 70%; display: table-cell; background-color: #ffcc99;">70%</div>
</div>
</div>
table-layout: fixed:
<div style="width: 500px; display: table; table-layout: fixed;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ffcc99; width: 100px;">100px</div>
<div style="width: 30%; display: table-cell;">30%</div>
<div style="width: 70%; display: table-cell; background-color: #ffcc99;">70%</div>
</div>
</div>
classic:
<div style="width: 500px; display: table;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ffcc99; width: 100px;">100px</div>
<div style="width: 30%; display: table-cell;">30%</div>
<div style="width: 70%; display: table-cell; background-color: #ffcc99;">70%</div>
</div>
</div>
<p><br /></p>
200% min-width:
<div style="width: 500px; display: table;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ffcc99; min-width: 100px;">100px</div>
<div style="width: 100%; display: table-cell;">30%</div>
<div style="width: 100%; display: table-cell; background-color: #ffcc99;">70%</div>
</div>
</div>
200% :after:
<div style="width: 500px; display: table;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ffcc99;" class="special">100px</div>
<div style="width: 100%; display: table-cell;">30%</div>
<div style="width: 100%; display: table-cell; background-color: #ffcc99;">70%</div>
</div>
</div>
200% &lt;div&gt;:
<div style="width: 500px; display: table;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ffcc99;"><div style="width: 100px;">100px</div></div>
<div style="width: 100%; display: table-cell;">30%</div>
<div style="width: 100%; display: table-cell; background-color: #ffcc99;">70%</div>
</div>
</div>
200% table-layout: fixed:
<div style="width: 500px; display: table; table-layout: fixed;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ffcc99; width: 100px;">100px</div>
<div style="width: 100%; display: table-cell;">30%</div>
<div style="width: 100%; display: table-cell; background-color: #ffcc99;">70%</div>
</div>
</div>
200% classic:
<div style="width: 500px; display: table;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ffcc99; width: 100px;">100px</div>
<div style="width: 100%; display: table-cell;">30%</div>
<div style="width: 100%; display: table-cell; background-color: #ffcc99;">70%</div>
</div>
</div>
<p><br /></p>
<table>
<tr>
<td>
vertical classic:
<div style="height: 500px; display: table;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ffcc99; height: 100px;">100px</div>
</div>
<div style="display: table-row;">
<div style="height: 30%; display: table-cell;">30%</div>
</div>
<div style="display: table-row;">
<div style="height: 70%; display: table-cell; background-color: #ffcc99;">70%</div>
</div>
</div>
</td>
<td>
vertical 200% classic:
<div style="height: 500px; display: table;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ffcc99; height: 100px;">100px</div>
</div>
<div style="display: table-row;">
<div style="height: 100%; display: table-cell;">30%</div>
</div>
<div style="display: table-row;">
<div style="height: 100%; display: table-cell; background-color: #ffcc99;">70%</div>
</div>
</div>
</td>
<td>
vertical 200% table-layout: fixed:
<div style="height: 500px; display: table; table-layout: fixed;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ffcc99; height: 100px;">100px</div>
</div>
<div style="display: table-row;">
<div style="height: 100%; display: table-cell;">30%</div>
</div>
<div style="display: table-row;">
<div style="height: 100%; display: table-cell; background-color: #ffcc99;">70%</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment