如何使 bulma 表响应？
Posted
技术标签:
【中文标题】如何使 bulma 表响应？【英文标题】：How can I make a bulma table responsive? 【发布时间】：2018-05-18 19:10:10 【问题描述】：我正在使用 Bulma CSS 框架，特别是我正在尝试使其中的表格具有响应性。
我尝试给它一个width: 100%; 并应用overflow-x: auto;，但它似乎不起作用。这是演示：http://104.236.64.172:8081/#/pricing
代码：
<div class="panel-block">
<table class="table is-bordered pricing__table">
<thead>
<tr>
<th>Travellers</th>
<th>Standard</th>
<th>Delux</th>
<th>Premium</th>
<th>Luxury</th>
</tr>
</thead>
<tbody>
<tr>
<td>Per Person Cost</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
</tr>
<tr>
<td>
Extra Person <br>
(> 12 yrs)
</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
</tr>
<tr>
<td>
Extra Child <br>
(> 12 yrs)
</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
</tr>
<tr>
<td>Total Cost</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
</tr>
</tbody>
</table>
</div>
相关CSS：
.pricing__table
width: 100%;
overflow-x: auto;
【问题讨论】：
我无法重现该问题，正如它所描述的那样。 看看演示。问题就在那里。 【参考方案1】：您可以将表格包装在一个容器中，然后在其中应用 overflow 属性。
此外，您可以在 table 上使用 is-fullwidth 修饰符，而不是在 CSS 中声明 width。
fiddle
.table__wrapper
overflow-x: auto;
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet" />
<div class="table__wrapper">
<table class="table is-bordered pricing__table is-fullwidth">
<tbody>
<tr>
<td>Per Person Cost</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
</tr>
<tr>
<td>
Extra Person <br> (> 12 yrs)
</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
</tr>
<tr>
<td>
Extra Child <br> (> 12 yrs)
</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
</tr>
<tr>
<td>Total Cost</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
</tr>
</tbody>
</table>
</div>根据评论更新
在您的情况下，您还需要将width 属性添加到.pricing
updated fiddle
.table__wrapper
overflow-x: auto;
.pricing
width: 100%;
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<div class="panel">
<div class="panel-block">
<div class="pricing">
<div class="table__wrapper">
<table class="table is-bordered pricing__table is-fullwidth">
<tbody>
<tr>
<td>Per Person Cost</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
</tr>
<tr>
<td>
Extra Person
<br> (> 12 yrs)
</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
</tr>
<tr>
<td>
Extra Child
<br> (> 12 yrs)
</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
</tr>
<tr>
<td>Total Cost</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
<td>₹ 70,523.90</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>【讨论】：
嘿，谢谢。当我将此解决方案应用于此处正在运行的网站时出现问题：104.236.64.172:8081/#/pricing 也许它与 flexbox 或我在布尔玛的panel-block 内使用表格有关。它似乎不起作用。你能帮我调试一下吗？只需使用 chrome 检查器将这些更改应用到实时站点并亲自查看。
你能改变标记吗？尝试用自己的div 包装表格，就像在 sn-p 中一样。
我做到了。你可以自己检查。在检查员。只需右键单击<table> 节点和Edit as html。然后将表格包装在div。
我不知道你可以这样编辑 HTML .. 每天学习新东西！我通过删除panel-block 上的flex 使其工作。我认为你需要重组你的 HTML。如果您使用相关的 HTML 和 CSS 编辑您的问题会更容易提供帮助，谢谢
太好了，很高兴它有帮助【参考方案2】：
在父 div 中使用 .table-container：
<div class="table-container">
<table class="table">
<!-- Your table content -->
</table>
</div>
https://bulma.io/documentation/elements/table/#table-container
【讨论】：
对，只是不要将 .table-container 包装在columns 和 column 类中【参考方案3】：
我找到了一个great alternative，它可以将水平元素变成垂直元素：
@media
only screen and (max-width: 1500px)
table, thead, tbody, th, td, tr
display: block;
thead tr
position: absolute;
top: -9999px;
left: -9999px;
tr border: 1px solid #ccc;
td
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 200px;
margin-left: 150px;
td:before
position: absolute;
top: 12px;
left: 6px;
width: 200px;
padding-right: 40px;
white-space: nowrap;
margin-left: -150px;
td:nth-of-type(1):before content: "Option";
td:nth-of-type(2):before content: "Description";
td:nth-of-type(3):before content: "Type";
td:nth-of-type(4):before content: "Default";
如果您不需要标头，请删除 td:before 修饰符。
【讨论】：
这太棒了！以上是关于如何使 bulma 表响应？的主要内容，如果未能解决你的问题，请参考以下文章