how to make a horizontal table with a fixed thead?
<p>I try to make a horizontal table with a fixed <code>thead</code> but i really don't know how to get it with a semantic HTML.</p>

<p>See this capture:
<a href="https://i.stack.imgur.com/ZMpiO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZMpiO.jpg" alt="enter image description here"></a></p>

<p>The red square is the fixed position, and i want to horizontaly scroll only the blue part, because the table could be very longer.</p>

<p>But the problem is i can not have a good markup.</p>

<p>For this time, i have tried this 2 time unsuccefully, the first look good but i can't set a fixed position because the markup is not very clear, i can't use <code>thead</code> here. And the second look ugly but the markup is better, with <code>thead</code>, to set him fixed and <code>tbody</code>scroll.</p>

<p>The first: <a href="http://jsfiddle.net/g7bxej1h" rel="nofollow noreferrer">jsfiddle.net/g7bxej1h</a></p>

<p>the second: <a href="http://jsfiddle.net/wwb3fc2o" rel="nofollow noreferrer">jsfiddle.net/wwb3fc2o</a></p>

<p>Can you give me a tips to how to make this table please ?</p>