Bootstrap/CSS中的水平滚动表 [英] Horizontal Scroll Table in Bootstrap/CSS

问题描述

我如何做到这一点，以使具有其自身宽度的容器内的表不遵循容器的宽度，而是当它不在容器内时保留表的宽度.我有一张非常宽的桌子，我想放到col-md-9容器中，它显示不好，因为它挤压了桌子以适合该容器.我已经为表尝试了min-width，但是它不灵活，因为向表中添加更多列将再次挤压它.可以在不遵循父级宽度的情况下使表格的宽度自动变化吗?

How could I make it so that a table inside a container with its own width does not follow the width of the container and instead, retain the table's width when it's not inside the container. I have a very wide table that I want to fit inside a col-md-9 container and it displays bad because it squeezes the table to fit to the container. I have tried min-width for the table but it is not flexible as adding more columns to my table will squeeze it again. Would it be possible to make the table's width auto while not following the parent's width?

<div class="col-md-9" style="overflow-x: auto">
    <table class="table table-bordered" style="width:auto">
    <tbody>
        <tr>
          .... contents
        </tr>
    <tbody>
    </table>
</div>

推荐答案

如果您使用的是Bootstrap 3，这是您的一种可能

Here is one possiblity for you if you are using Bootstrap 3

实时视图: http://fiddle.jshell.net/panchroma/vPH8N/10/显示/

编辑视图: http://jsfiddle.net/panchroma/vPH8N/

我正在使用 http://getbootstrap.com/css/#tables中的目标表代码响应式

即:

<div class="table-responsive">
<table class="table">
...
</table>
</div>

这篇关于Bootstrap/CSS中的水平滚动表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！