Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Responsive Table" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<table>
  <thead>
    <tr>
      <td>Order ID</td>
      <td>Item Name</td>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-title="Order ID">#1</td>
      <td data-title="Item Name">Item 1</td>
      <td data-title="Price">100</td>
    </tr>
    <tr>
      <td data-title="Order ID">#2</td>
      <td data-title="Item Name">Item 2</td>
      <td data-title="Price">200</td>
    </tr>
  </tbody>
</table>
</body>
</html>
 
table {
  width: 100%;
}
thead {
  display: none;
  font-weight: bold;
}
td {
  padding-left: 30% !important;
  display: block;
}
td:last-child {
  border-bottom: 1px solid #666;
  margin-bottom: 7px;
}
td:before {
  content: attr(data-title);
  position: absolute;
  left: 6px;
  font-weight: bold;
}
Output

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

Dismiss x