Skip to content

Instantly share code, notes, and snippets.

@uschmelzer

uschmelzer/JS Bin Test Table Borders inside only.html

Last active March 6, 2018 14:23
Show Gist options
  • Save uschmelzer/b0737b7247135f96ae45f251d307f434 to your computer and use it in GitHub Desktop.
Save uschmelzer/b0737b7247135f96ae45f251d307f434 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
JS Bin Test Table Borders inside only.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style id="jsbin-css">
.table {
display: table;
/* border-collapse: separate; */
border-collapse: collapse;
border-spacing: 10px;
background-color:#ccc;
}
.row { display:table-row; }
.cell {
display:table-cell;
padding:0px;
background-color: gold;
}
</style>
</head>
<body>
<h2>border</h2>
<div class="table">
<div style="border-color:skyblue; border-bottom:5px; border-right:5px;" class="cell">Cell 1</div>
<div style="border-color:skyblue; border-bottom:5px; border-left:5px;" class="cell">Cell 2</div>
</div>
<div class="table">
<div style="border-color:skyblue; border-top:5px; border-right:5px;" class="cell">Cell 3</div>
<div style="border-color:skyblue; border-top:5px; border-left:5px;" class="cell">Cell 4</div>
</div>
<h2 style="color:green">padding (USE THIS, WITH table.border-collapse:collapse)</h2>
<div class="table">
<div style="padding-bottom:5px; padding-right:5px;" class="cell">Cell 1</div>
<div style="padding-bottom:5px; padding-left:5px;" class="cell">Cell 2</div>
</div>
<div class="table">
<div style="padding-top:5px; padding-right:5px;" class="cell">Cell 3</div>
<div style="padding-top:5px; padding-left:5px;" class="cell">Cell 4</div>
</div>
<h2>margin (geht nicht)</h2>
<div class="table">
<div style="margin-right:5px;" class="cell">Cell 1</div>
<div style="margin-left:5px;" class="cell">Cell 2</div>
</div>
<div class="table">
<div style="margin-right:5px;" class="cell">Cell 3</div>
<div style="margin-left:5px;" class="cell">Cell 4</div>
</div>
<h2>border-collapse</h2>
<div class="table" style="border-collapse:separate;">
<div style="margin-right:5px;" class="cell">Cell 1</div>
<div style="margin-left:5px;" class="cell">Cell 2</div>
</div>
<div class="table" style="border-collapse:separate;">
<div style="margin-right:5px;" class="cell">Cell 3</div>
<div style="margin-left:5px;" class="cell">Cell 4</div>
</div>
<script id="jsbin-source-css" type="text/css">.table {
display: table;
/* border-collapse: separate; */
border-collapse: collapse;
border-spacing: 10px;
background-color:#ccc;
}
.row { display:table-row; }
.cell {
display:table-cell;
padding:0px;
background-color: gold;
}</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment