在可通过 overflow-x 滚动的 html css 角度表中，有没有办法修复最右边的列？

Question

In a html css angular table that is scrollable through overflow-x, is there a way to fix the right-most column so that when i scroll from left to right, that column stays there?

I tried the sticky property, as well as creating two tables right next to eachother (which does not accomplish the task successfully. I am thinking that i should overlay two tables on top of eachother but i am not sure how i should go about this.

Answer 1

position: sticky appears to work fine on chrome and firefox:

 div { width: 100%; overflow: hidden; overflow-x: scroll; } table, th, td { border: 1px solid black; background-color: white; } table { width: 1000px; }.sticky-col { width: 40px; position: sticky; right: 0; }

 <div> <table> <tr><th>1</th><th>2</th><th class="sticky-col">3</th></tr> <tr><td>1,1</td><td>1,2</td><td class="sticky-col">1,3</td></tr> <tr><td>2,1</td><td>2,2</td><td class="sticky-col">2,3</td></tr> <tr><td>3,1</td><td>3,2</td><td class="sticky-col">3,3</td></tr> </table> </div>