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>
<div class=table-data>
<table>
<tr style="background-color:green; color:white;">
<th>Fields</th>
<th>Record1</th>
<th>Record2</th>
<th>Record3</th>
<th>Record4</th>
<th>Record5</th>
<th>Record6</th>
<th>Record7</th>
<th>Record8</th>
</tr>
<tr>
<td>Name:</td>
<td>Name 1</td>
<td>Name 2</td>
<td>Name 3</td>
<td>Name 4</td>
<td>Name 5</td>
<td>Name 6</td>
<td>Name 7</td>
<td>Name 8</td>
</tr>
<tr>
<td>Email:</td>
<td>Email 1</td>
<td>Email 2</td>
<td>Email 3</td>
<td>Email 4</td>
<td>Email 5</td>
<td>Email 6</td>
<td>Email 7</td>
<td>Email 8</td>
</tr>
<tr>
<td>Address:</td>
<td>Address 1</td>
<td>Address 2</td>
<td>Address 3</td>
<td>Address 4</td>
<td>Address 5</td>
<td>Address 6</td>
<td>Address 7</td>
<td>Address 8</td>
</tr>
 
</table>
  
</div>
​
</body>
</html>
 
​
​
.table-data
{
  background:#f6f6f6;
  overflow-x:scroll;  
  overflow-y:visible;
  margin-left:5em; 
  width: 60%; 
}
​
table{border-collapse:separate; table-layout:fixed;}
​
table th td{padding:5px;  width:100px;}
table td{border:1px solid gray;}
​
table td:not(:first-child)
{background:#f6f6f6;overflow-x:scroll;  }
​
table td:not(:first-child):hover
{background:red;overflow-x:scroll;}
​
table td:first-child, table th:first-child{ 
  position:absolute; 
  width:5em;
  left:0;
  top:auto;
  background:cyan;
}
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers