[bootstrap]表格超出頁面寬度的處理方式

參考網址:https://bootstrap5.hexschool.com/docs/5.0/content/tables/
 

表格的一些屬性被bootstrap重置了,以致於以下作法無效。
html表格table显示的宽度超出界面的解决方法
https://blog.csdn.net/weixin_44518466/article/details/111921984
 

<div style="overflow: auto;">
<table></table>
</div>

原因是bootstap針對單一檔案內 CSS 的特定元素重置樣式,重置以便 Bootstrap 準確且一致的建立樣式。
https://bootstrap5.hexschool.com/docs/5.0/content/reboot/

 

解決方法是直接套用bootstrap的表格設定

<div class="table-responsive">     
<table class="table table-bordered border-primary table-hover">
</table>
</div>


 

本篇發表於 程式設計。將永久鏈結加入書籤。