в соответствии с потребностями моего проекта, я установил содержимое первых трех столбцов и заголовки таблицы c, используя свойства position и left css и оставив остальные столбцы прокручиваемый по горизонтали, как показано ниже 
Но если в столбцах non stati c больше содержимого, то содержимое столбца non stati c отображается поверх содержимого столбца stati c, например ниже 
и обратите внимание на еще одну вещь, если какой-либо столбец non stati c имеет больше содержимого, чем содержимое других столбцов non stati c, перемещающееся вниз (может быть из-за первых трех столбцы имеют положение : абсолютное , но не уверены) от начальной точки, как показано ниже, но они должны быть выровнены только сверху в соответствии с моими потребностями 
исходный код:
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
width:900px;
}
/*This sets alternating colours on each odd numbered column:*/
table tr:nth-child(odd) td
{
background-color: #fff;
}
/*This sets alternating colours on each even numbered column:*/
table tr:nth-child(even) td
{
background-color: #eee;
}
/* tr:nth-child(add) {
background-color: #eee;
} */
tr th,
td {
padding: 5px;
width:100pt;
height: auto;
}
tr th{
text-align: left;
background-color: black;
color: white;
}
div{
width:700px;
overflow-x: scroll;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<th style="position:absolute;left:0pt;">Heading1</th>
<th style="position:absolute;left:80pt;">Heading2</th>
<th style="position:absolute;left:140pt;">Heading3</th>
<th>Heading4</th>
<th>Heading5</th>
<th>Heading6</th>
<th>Heading7</th>
<tr>
<tr>
<td style="position:absolute;left:0pt;">Content1 Content1 Content1 Content1</td>
<td style="position:absolute;left:80pt;">Content2</td>
<td style="position:absolute;left:140pt;">Content3</td>
<td>Content4</td>
<td>Content5 Content5 Content5 Content5 Content5</td>
<td>Content6</td>
<td>Content7</td>
</tr>
<tr>
<td style="position:absolute;left:0pt;">Content1</td>
<td style="position:absolute;left:80pt;">Content2</td>
<td style="position:absolute;left:140pt;">Content3</td>
<td>Content4</td>
<td>Content5</td>
<td>Content6</td>
<td>Content7</td>
</tr>
<tr>
<td style="position:absolute;left:0pt;">Content1</td>
<td style="position:absolute;left:80pt;">Content2</td>
<td style="position:absolute;left:140pt;">Content3</td>
<td>Content4</td>
<td>Content5</td>
<td>Content6</td>
<td>Content7</td>
</tr>
<tr>
<td style="position:absolute;left:0pt;">Content1</td>
<td style="position:absolute;left:80pt;">Content2</td>
<td style="position:absolute;left:140pt;">Content3</td>
<td>Content4</td>
<td>Content5</td>
<td>Content6</td>
<td>Content7</td>
</tr>
</table>
</div>
</body>
</html>
Что я могу попробовать? заранее спасибо.