How to make one column fixed and the other one scrollable - html

Question

I have tried to make a page where one column is fixed and the other one is scrollable. In the template "Os name" and "{{ i.os_name }}", I want to make it fixed. All the other ones should be scrollable.
I have tried some solutions but I'm facing issues. I have pasted the CSS which I have tried. Please tell me where I am going wrong so I can make it correct.
<div>
<table class="table accountTable" id="book-table" cellpadding="0" cellspacing="0" style="width: 91%;">
<thead>
<tr class="accountBorder">
<th class="osfix">Os Name</th>
<th class="">Browser</th>
<th>IP Address</th>
<th>Location</th>
<th>Session Time</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
{% for i in account %}
<tr>
<td><div class="osfixName">{{ i.os_name }}</div></td>
<td>
<div class = "title_elipses accordion">{{ i.browser }}</div>
<div class="panel" style="display: none;"><p>{{i.browser}}</p></div>
</td>
<td>
<div>{{ i.ip_address }}</div>
</td>
<td>
<div>{{ i.city }}, {{ i.country }}</div>
</td>
<td>
{% for key,value in some_date.items %}
{% if i.id == key %}
<!-- here we are displaying the age of the ad -->
<span class="dealpagetext">{{ value }}</span><br>
{% endif %}
{% endfor %}
<!-- <div>{{ i.last_loggedin }}</div>-->
</td>
<td>
{% if i.activity == 1 %}
<div>Signout</div>
{% else %}
<div></div>
{% endif %}
</td>
</tr>
{% empty %}
<tr>
<td colspan="7" class="text-center">No History</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
css
#book-table {
width: 131% !important;
margin-left: 111px;
}
.osfix {
position: fixed;
left: 0;
background-color: #ddd;
padding-left: 4px;
}
.osfixName {
position: fixed;
left: 0;
padding-left: 4px;
z-index: 88;
background-color: #fff;
}