修复多个表的第一列相互重叠

Question

我有以下HTML代码：

<div class="parent-class">
 <div class="div1" style="z-index:1;">
    <table>
		<tr>
			<td>fixed column</td>
			<td>simple column</td>
			<td>simple column</td>
			<td>fsimple column</td>
			<td>simple column</td>
			<td>simple column</td>
		</tr>
		......
		......
	</table>
 </div>
 
  <div class="div2" style="z-index:2;">
    <table>
		<tr>
			<td>fixed column</td>
			<td>simple column</td>
			<td>simple column</td>
			<td>fsimple column</td>
			<td>simple column</td>
			<td>simple column</td>
		</tr>
		......
		......
	</table>
 </div>
  <div class="div3" style="z-index:3;">
    <table>
		<tr>
			<td>fixed column</td>
			<td>simple column</td>
			<td>simple column</td>
			<td>fsimple column</td>
			<td>simple column</td>
			<td>simple column</td>
		</tr>
		......
		......
	</table>
 </div>
 
 </div>

正如您所看到的，所有三个表都相互重叠并且工作正常但我无法在水平滚动中修复表格的第一列。 请帮我解决一些CSS代码。