What is the best way to render a large table to the mobile devices?
<p>for my web application using AngularJs and Bootstrap as a web framework.</p>

<p>I'm implementing a table for insertion of working hours, overtime, travel expenses, repayments etc ..</p>

<p>The table is currently composed of 6 columns collapsible in 5.</p>

<p>Here are two screenshots with the desktop version:</p>

<p><a href="https://i.stack.imgur.com/ibqEG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ibqEG.png" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/gXEYP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gXEYP.png" alt="enter image description here"></a></p>

<p>These however are 2 screenshots mobile version on Nexus 5:</p>

<p><a href="https://i.stack.imgur.com/aopkp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aopkp.png" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/TSizi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TSizi.png" alt="enter image description here"></a></p>

<p>The visualization on the mobile version is clearly very bad. Plus it must consider that the user, in this version, should scroll sideways on each line. Which makes the application a non-friendly application.
The question is: How to make a table of this type in such a way that in both versions, the visualization is clear, clean and friendly?</p>