英文:
Bootstrap 5 table - full width on mobile, auto on desktop
问题
如何在移动设备上使用纯Bootstrap类创建一个全宽表格，但在桌面上使用auto？
我尝试使用以下代码：
<table class="table table-bordered w-md-auto w-100 text-start mb-2">
但是w-100类使用了!important，因此它始终会覆盖桌面视图，显示为100%宽度而不是auto。
我尝试在不同的断点使用w-100和w-auto的组合，但仍无法在移动设备上显示100%宽度，而在桌面上使用auto。
注意：我不能使用任何形式的JavaScript，也不能添加任何自定义的CSS来覆盖Bootstrap。
英文:
How do I create a full width table using pure bootstrap classes on a mobile device, but auto on a desktop?
I tried to use:
<table class="table table-bordered w-md-auto w-100 text-start mb-2">
But the w-100 class uses !important so it always overrides the desktop view to show it as 100% width instead of auto.
I tried using a combination of w-100 and w-auto at different breakpoints but still can't get to show 100% wide on a mobile but auto on a desktop.
Note: I can't use any form of javascript, or add any custom CSS to override bootstrap.
答案1
得分: 0
理想情况下，使用Bootstrap的方法是依赖于默认的 .table 上应用的 width: 100%，并在桌面上进行覆盖:
@media (min-width: 576px) {
.table {
width: auto;
}
}
不过，你提到你不能添加自定义CSS；不幸的是，在表格的内联 style="..." 属性上添加 @media 查询是不可能的，所以唯一的解决方法（尽管有点繁琐）是包含两个版本的相同表格（一个用于移动设备，一个用于桌面），使用Bootstrap的 d-{x} 显示类来切换可见性:
<table class="table table-bordered text-start mb-2 d-sm-none">
<caption>
移动设备表格
</caption>
...
</table>
<table class="table table-bordered text-start mb-2 w-auto d-none d-sm-table">
<caption>
桌面表格
</caption>
...
</table>
尽管不建议这样做，因为会导致标记的重复。如果你不能添加单独的.CSS文件，可以考虑将样式添加到HTML本身，例如:
<style type="text/css">
@media (min-width: 576px) {
.table {
width: auto;
}
}
</style>
如果担心自定义CSS会在其他地方产生意外效果，可以给表格添加一个自定义类（例如 .my-responsive-table）或唯一的ID，并以此为目标，而不是使用 .table。
英文:
Ideally the Boostrap way of doing it would be to rely on the default width: 100% applied to .table, overriding it for desktop with:
@media (min-width: 576px) {
.table {
width: auto;
}
}
You did mention you're not able to add custom CSS though; unfortunately it's not possible to add a @media query to an inline style="..." attribute on the table, so the only other way around this (gnarly as it is) is to include two versions of the same table (one for mobile, one for desktop), toggling the visibility using Bootstrap d-{x} display classes:
<table class="table table-bordered text-start mb-2 d-sm-none">
<caption>
Mobile table
</caption>
...
</table>
<table class="table table-bordered text-start mb-2 w-auto d-none d-sm-table">
<caption>
Desktop table
</caption>
...
</table>
Definitely not recommended though, due to the duplication of markup. If you're limited in not being able to add a separate .CSS file, consider adding styling to the HTML itself, e.g.:
<style type="text/css">
@media (min-width: 576px) {
.table {
width: auto;
}
}
</style>
If the concern is of custom CSS having unintended effects elsewhere, add either a custom class (e.g. .my-responsive-table) or a unique ID to the table, and target that instead of .table.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论