Zone avec défilement horizontal

Bonjour,
Je cherche à réaliser une zone qui contient des tableaux (chacun des tableaux étant dans mon cas 1 élément) et pouvoir les afficher sur une seule ligne avec une scroll-bar horizontal.
J'ai donc regardé la doc (https://www.w3schools.com/cssref/css3_pr_overflow-x.asp officielle comme vous pouvez le voir) et un peu sur le net mais je ne comprend pas pourquoi ce que je fais ne fonctionne pas

la partie du html concernée (autour y'a juste une navbar en fixed et le code mini d'une page) :

<div id="corps" class="bordure">
		<table class="elt">
			<tr><td>a</td></tr>
			<tr><td>b</td></tr>
			<tr><td>c</td></tr>
		</table>
		<table class="elt">
			<tr><td>a</td></tr>
			<tr><td>b</td></tr>
			<tr><td>c</td></tr>
		</table>
		<table class="elt">
			<tr><td>a</td></tr>
			<tr><td>b</td></tr>
			<tr><td>c</td></tr>
		</table>
		<table class="elt">
			<tr><td>a</td></tr>
			<tr><td>b</td></tr>
			<tr><td>c</td></tr>
		</table>
		<table class="elt">
			<tr><td>a</td></tr>
			<tr><td>b</td></tr>
			<tr><td>c</td></tr>
		</table>
		<table class="elt">
			<tr><td>a</td></tr>
			<tr><td>b</td></tr>
			<tr><td>c</td></tr>
		</table>
		<table class="elt">
			<tr><td>a</td></tr>
			<tr><td>b</td></tr>
			<tr><td>c</td></tr>
		</table>
		
	</div>

mon css concerné :

#corps
{
	width: 800px;
	margin:auto;
	overflow-x: auto;
	overflow-y: hidden;
	height: 100px;
}
#corps .elt
{
	width: 300px;
	float: left;
	background: red;
	border: solid blue 1px;
	height: 80px;
}

Si quelqu'un avait une proposition de pourquoi ça ne fonctionne pas je suis peneur. Actuellement soit je mets mes .elt en float:left et il se mette sur une ligne mais quand ils devraient dépasser la longueur du div il retourne à la ligne. Soit quand j'enlève le float:left ils se mettent tous sur une seule colonne.