I'm making a responsive web Hold the outer layout with the bootstrap container Split into col-lg-5 / col-lg-2 / col-lg-5 structures I made a table with scroll function in the col-lg-5 part.
// <table>
<thead>
<tr style="height:30px" id="thead_nation">
<th>Position</th>
<th>Player</th>
<th>Age</th>
<th>Height</th>
<th id="test2">Entry</th>
</tr>
</thead>
</table>
<div class="scroll_y">
<table>
<tbody id="away_team_player_nation">
</tbody>
</table>
</div>
tbody's id (away_team_player_nation) is connected by jquery so that the list of players is straight I applied .scroll_y { height:200px; overflow-x:hidden} to the class="scroll_y" But on my computer, the ratio of column name and content is broken, and when I read the same page, it fits well on other PCs They all used Chrome browsers, and I don't know what caused it.
The question you're asking is actually whether scroll bar itself will be considered a problem situation or not.
1. If it's a problem, get appropriate scrollbar library. Then, most OS/device/browser will do the same thing, so you can respond from there again.
Based on the behavior of the linked library, it seems that it will solve the current surface problem - "The problem of the scroll bar taking over the place and the table is deviating from each other."
2. By the way, I don't think the strong scroll bar should be considered a problem. It's like we're using a technology called Web Font to not take issue with browser default fonts, but instead to use certain fonts that are essential. The width of the scroll bar itself varies from browser to OS.
You can't live by matching this. My opinion is that the best strategy is not to fight these problems, that is, even if has a problem, to create a view that doesn't matter. To think more about the problem you shared, in this case, the entire table should follow the scroll of the entire page, but under certain conditions, the header should be fixed to the top of the page. (A lot of people do this.)
I'd appreciate it if you could refer to it.
© 2024 OneMinuteCode. All rights reserved.