带粘性列的表 - 单元格大小的问题

Question

我有一张桌子可以在屏幕足够窄时向左或向右滑动。第一列位于绝对位置，因此始终可见。

是否可以使第一列中的单元格保持其他列中单元格的大小？我不确定如何在保持第一列冻结的同时实现这一目标。

以下是我的代码的小提琴：http://jsfiddle.net/ta945/

这里是HTML和CSS

HTML：

<div>
  <table>
    <thead>
        <tr>
            <th class="sticky">Name</th>
            <th>Helpful Services</th>
            <th>State</th>
            <th>City</th>
            <th>Phone</th>
            <th>URL</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="sticky">First Name</td>
            <td>Math</td>
            <td>CO</td>
            <td>San Francisco</td>
            <td>123-456-7890</td>
            <td>http://somewhere.com</td>
        </tr>
        <tr>
            <td class="sticky">Second Name</td>
            <td>Reading</td>
            <td>NY</td>
            <td>New York City</td>
            <td>123-456-7890</td>
            <td>http://somewhere.com</td>
        </tr>
        <tr>
            <td class="sticky">Third Name</td>
            <td>Art</td>
            <td>IL</td>
            <td>Chicago</td>
            <td>123-456-7890</td>
            <td>http://somewhere.com</td>
        </tr> 
        <tr>
            <td class="sticky">Four Name</td>
            <td>Programming</td>
            <td>IL</td>
            <td>Chicago</td>
            <td>123-456-7890</td>
            <td>http://somewhere.com</td>
        </tr>
    </tbody>
  </table>
</div>

CSS：

div {
  width: 100%;
  border: 1px solid #000000;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: seperate;
  border-spacing: 0;
  margin-left: 5em;
}

thead, tbody, tr {
  vertical-align: middle;
}

th {
  font-weight: bold;
  padding: 2px 4px;
  background-color: #676767;
  color: #FFFFFF
}

td {
  padding: 2px 4px;
}

tbody tr:nth-child(even) td {
  background-color: #cccccc;
}

.sticky {
  position: absolute;
  left: 0;
  top: auto;
  margin-left: 9px;
}