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>Responsive scrollable tables</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
  <h1>Responsive scrollable table demo</h1>
  <div class="widetable">
    <table>
        <thead>
            <tr>
                <th></th>
                <th scope="col"> Table header</th>
                <th scope="col"> Table header</th>
                <th scope="col"> Table header</th>
                <th scope="col"> Table header</th>
                <th scope="col"> Table header</th>
                <th scope="col"> Table header</th>
            </tr>
        </thead>
            <tbody>
            <tr>
                <th scope="row"> A </th>
                <td> € 0,0035 </td>
                <td> € 0,0041 </td>
                <td> € 0,0041 </td>
                <td> € 0,0041 </td>
                <td> € 0,0041 </td>
                <td> € 0,0041 </td>
            </tr>
            <tr>
                <th scope="row"> B </th>
                <td> € 0,0042 </td>
                <td> € 0,0048 </td>
                <td> € 0,0048 </td>
                <td> € 0,0048 </td>
                <td> € 0,0041 </td>
                <td> € 0,0041 </td>
            </tr>
            <tr>
                <th scope="row"> C </th>
                <td> € 0,0062 </td>
                <td> € 0,0068 </td>
                <td> € 0,0068 </td>
                <td> € 0,0068 </td>
                <td> € 0,0041 </td>
                <td> € 0,0041 </td>
            </tr>
            <tr>
                <th scope="row"> D </th>
                <td> € 0,0088 </td>
                <td> € 0,0091 </td>
                <td> € 0,0091 </td>
                <td> € 0,0091 </td>
                <td> € 0,0041 </td>
                <td> € 0,0041 </td>
            </tr>
            <tr>
                <th scope="row"> E </th>
                <td> € 0,0086 </td>
                <td> € 0,0090 </td>
                <td> € 0,0090 </td>
                <td> € 0,0090 </td>
                <td> € 0,0041 </td>
                <td> € 0,0041 </td>
            </tr>
            <tr>
                <th scope="row"> F </th>
                <td> € 0,0096 </td>
                <td> € 0,0098 </td>
                <td> € 0,0098 </td>
                <td> € 0,0098 </td>
                <td> € 0,0041 </td>
                <td> € 0,0041 </td>
            </tr>
            <tr>
                <th scope="row"> G </th>
                <td> € 0,0111 </td>
                <td> € 0,0111 </td>
                <td> € 0,0111 </td>
                <td> € 0,0111 </td>
                <td> € 0,0041 </td>
                <td> € 0,0041 </td>
            </tr>
            <tr>
                <th scope="row"> H </th>
                <td> € 0,0123 </td>
                <td> € 0,0125 </td>
                <td> € 0,0125 </td>
                <td> € 0,0125 </td>
                <td> € 0,0041 </td>
                <td> € 0,0041 </td>
            </tr>
            <tr>
                <th scope="row"> I </th>
                <td> € 0,0122 </td>
                <td> € 0,0123 </td>
                <td> € 0,0123 </td>
                <td> € 0,0123 </td>
                <td> € 0,0041 </td>
                <td> € 0,0041 </td>
            </tr>
            <tr>
                <th scope="row"> J </th>
                <td> € 0,0165 </td>
                <td> € 0,0162 </td>
                <td> € 0,0162 </td>
                <td> € 0,0162 </td>
                <td> € 0,0041 </td>
                <td> € 0,0041 </td>
            </tr>
        </tbody>
    </table>
  </div>
</body>
</html>
 
body {
  font: 100%/1.25 sans-serif;
  color: #636363;
  padding: 1em;
}
​
table {
  width: 100%;
  margin: 0;
  border-top: 1px solid #e4e2e8;
  border-collapse: collapse;
}
​
th {
  text-align: left;
  color: black;
  background-color: #f8f8f8;
  background-color: rgba(195, 195, 197, 0.1); 
}
​
th, td {
  border-color: silver;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  padding: 0.25em 0.5em; 
}
​
td { font-size: .75em; }
​
/* See Lea Verou's explanation background-attachment:
 * http://lea.verou.me/2012/04/background-attachment-local/
 */
.widetable {
  overflow-x: auto;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(100%, rgba(255, 255, 255, 0))), -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #ffffff), color-stop(100%, rgba(255, 255, 255, 0))), -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #c3c3c5), color-stop(100%, rgba(195, 195, 197, 0))), -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #c3c3c5), color-stop(100%, rgba(195, 195, 197, 0)));
  background-image: -webkit-linear-gradient(left, #ffffff, rgba(255, 255, 255, 0)), -webkit-linear-gradient(right, #ffffff, rgba(255, 255, 255, 0)), -webkit-linear-gradient(left, #c3c3c5, rgba(195, 195, 197, 0)), -webkit-linear-gradient(right, #c3c3c5, rgba(195, 195, 197, 0));
  background-image: -moz-linear-gradient(left, #ffffff, rgba(255, 255, 255, 0)), -moz-linear-gradient(right, #ffffff, rgba(255, 255, 255, 0)), -moz-linear-gradient(left, #c3c3c5, rgba(195, 195, 197, 0)), -moz-linear-gradient(right, #c3c3c5, rgba(195, 195, 197, 0));
  background-image: -o-linear-gradient(left, #ffffff, rgba(255, 255, 255, 0)), -o-linear-gradient(right, #ffffff, rgba(255, 255, 255, 0)), -o-linear-gradient(left, #c3c3c5, rgba(195, 195, 197, 0)), -o-linear-gradient(right, #c3c3c5, rgba(195, 195, 197, 0));
  background-image: linear-gradient(left, #ffffff, rgba(255, 255, 255, 0)), linear-gradient(right, #ffffff, rgba(255, 255, 255, 0)), linear-gradient(left, #c3c3c5, rgba(195, 195, 197, 0)), linear-gradient(right, #c3c3c5, rgba(195, 195, 197, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 4em 100%, 4em 100%, 1em 100%, 1em 100%;
  background-attachment: local, local, scroll, scroll; 
}
​
Output 300px

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

Dismiss x
public
Bin info
stephenhaypro
0viewers