Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table>
    <thead><tr>
      <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th>
      </tr>
    </thead>
    <tbody>
      <tr data-first="1" data-third="3" data-forth="1"><td rowspan="2">1</td><td>2</td><td colspan="2">3</td><td rowspan="3" >4</td><td>5</td><td>6</td></tr>
      
      <tr data-first="2" data-third="2"><td colspan="2">2</td><td rowspan="2">3</td><td>5</td><td>6</td></tr>
      
      <tr data-first="1" ><td colspan="2" rowspan="2">1</td><td>2</td><td>5</td>
        <td>6</td></tr>
      
      <tr data-first="2" data-third="2" data-forth="1"><td colspan="2">2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
      
    </tbody>
  </table>
</body>
</html>
 
​
* {
  margin:0;
  padding:0;
}
​
body {
  margin:100px 0 0 50px;
}
​
table {
  border-collapse:separate;
  border-spacing: 4px;
  position:relative;
  font-weight:bold
}
​
tr {
 
}
​
​
td {
  padding:10px 15px;
  border: solid 1px #777;
  text-align:center;
}
​
th {
  background:#777;
  color:white;
  padding: 10px 15px;
}
​
tbody tr:nth-child(2) td:nth-last-child(2) {
  position:absolute;
  width:52px;
}
​
tbody tr:nth-child(2) td:last-child {
  position:relative;
  left:44px;
}
​
tbody tr:first-child td:last-child {
  position:absolute;
  width:52px;
  height:64px;
  line-height:64px;
  top:4px;
}
​
tbody tr:nth-last-child(2) td:last-child {
  position: absolute;
  width:52px;
}
​
tr[data-first="1"] td:first-child {
  background:red;
  color:white;
}
​
tr[data-first="2"] td:first-child,
tr[data-first="1"] td:nth-child(2) {
  background: orange;
  color:white;
}
​
tr[data-third="2"] td:nth-child(2),
tr[data-third="3"] td:nth-child(3) {
  background:yellow;
  color:green;
}
​
tr[data-forth] td:nth-last-child(3) {
  background:green;
  color:white;
}
​
tr td:nth-last-child(2) {
  background:lime;
  color: #531;
}
​
tr td:last-child {
  background:#537;
  color:white;
}
​
​
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dmkimpro
0viewers