Large HTML Data Table With A Fixed Left Column and Overflow Scrolling on the Right (With ULs)

mobile_tables_ul_style.html.erb

<style>

#list {
	float: left;
	width: 10%;
	overflow: hidden;
}

#list ul {
  padding: 0;
  margin: 0;
}

#list li {
  display: block;
  border: 1px solid black;
  height: 20px;
}

#table {
	float: left;
	width: 90%;
	overflow: scroll;
	<% if @overflow %>-webkit-overflow-scrolling : touch;<% end %>
}

#table ul {
  padding: 0;
  margin: 0;
}

#table li {
  display: table-cell;
}

#table .column {
  display: block;
  border: 1px solid black;
  width: 100px;
  height: 20px;
}

</style>

<div id="list">
		<ul>
			<li>Number</li>
			<% 150.times do |number| %>
			<li><%= number %></li>
			<% end %>
		</ul>
</div>

<div id="table">
	<div id="thead">
		<ul>
			<% 150.times do |number| %>
			<li><span class="column"><%= number %></span></li>
			<% end %>
		</ul>
	</div>
	<div id="tbody">
		<% 150.times do |number| %>
		<ul>
			<% 150.times do |number2| %>
			<li><span class="column"><%= number * number2%></span></li>
			<% end %>
		</ul>
		<% end %>
	</div>
</div>