My tables stack on top of each other fine unless they get 100 or so rows, in which case they align side by side on IE 10. I need them to always stack. They're fine or Firefox and on some installations of IE 10. How to I make them always stack regardless of the browser?
<html>
<head>
<title>Test Project 1</title>
</head>
<body>
<h2 style="text-align: center;">
Test Project 1</h2>
<h3 style="text-align: center;">
2013-06-09 10:08</h3>
<table float="left" clear="left" align="left" border="0" cellpadding="1" cellspacing="1" width="728" style="font-family:arial,helvetica,sans-serif;font-size: 12px;">
<tbody>
<tr>
<th scope="col">
RFI
<hr />
</th>
<th scope="col">
Description
<hr />
</th>
<th scope="col">
Rec'd
<hr />
</th>
<th scope="col">
Due
<hr />
</th>
<th scope="col">
Issued
<hr />
</th>
<th scope="col">
Age
<hr />
</th>
</tr>
</tbody>
</table>
<p>
</p>
<table float="left" clear="left" align="left" border="0" cellpadding="1" cellspacing="1" width="728" style="font-family:arial,helvetica,sans-serif;font-size: 12px;">
<tbody>
<tr>
<th scope="col">
CCO
<hr />
</th>
<th scope="col">
Description
<hr />
</th>
<th scope="col">
Rec'd
<hr />
</th>
<th scope="col">
Due
<hr />
</th>
<th scope="col">
Issued
<hr />
</th>
<th scope="col">
Age
<hr />
</th>
</tr>
</tbody>
</table>
</body>
</html>