Question

当窗口变得足够窄以使滚动条出现在“表格响应”div中的表格中时，如何防止行高度更改为1行。如果表中包含大量文本，则在缩小时很难读取。有没有办法为行设置最小列数？我尝试了连续向第一个条目添加换行符的快速而肮脏的解决方案，但是这些行仍然没有工作，但是在下面添加了几行空格。

示例：

<div class="table-responsive">
<table class="table">
                    <div class="highlight">
                        <h4>Morbi nec metus. Phasellus blandit leo ut odio.</h4>
                    </div>
                    <thead>
                        <tr>
                            <th class="col-xs-1"></th>
                            <th class="col-xs-3">Column 1</th>
                            <th class="col-xs-6">Column 2</th>
                            <th class="col-xs-1">Column 3</th>
                            <th class="col-xs-1">Column 4</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>(1)</td>
                            <td>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper lib</td>
                            <td>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper lib <a href="">link</a></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>(2)</td>
                            <td>Etiam rhoncus. Maecenas tempus,</td>
                            <td>llus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, p</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>(3)</td>
                            <td>Etiam rhoncus. Maecenas tempus,</td>
                            <td>adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonu</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>(4)</td>
                            <td>tellus eget condimentum</td>
                            <td>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum</td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
</div>

http://jsfiddle.net/YhmDE/

Answer 1

在标题上使用nowrap。要应用于所有标题列，只需添加样式

即可

th {
    white-space: nowrap;
}

Answer 2

DEMO：http://jsbin.com/udAZAva/1/edit

@media (max-width: 767px) {

  .my-responsive-table-wrapper {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #dddddd;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
  }

  .my-responsive-table-wrapper > .my-table > thead > tr > th,
  .my-responsive-table-wrapper > .my-table > tbody > tr > th,
  .my-responsive-table-wrapper > .my-table > tfoot > tr > th,
  .my-responsive-table-wrapper > .my-table > thead > tr > td,
  .my-responsive-table-wrapper > .my-table > tbody > tr > td,
  .my-responsive-table-wrapper > .my-table > tfoot > tr > td {
    white-space: normal;
  }
}

Answer 3

也许考虑一个精简表。

<div>
    <table class="table table-condensed">

http://jsfiddle.net/Gbrby/

防止Bootstrap 3响应表从内容扁平化为单行

3 个答案:

DEMO：http://jsbin.com/udAZAva/1/edit