使用引导类时无法解决问题答案

【问题标题】：unable to fix the issue when used bootstrap classes使用引导类时无法解决问题
【发布时间】：2017-04-24 10:13:49
【问题描述】：

我发现我的代码有两个问题。标题没有得到修复，第二个问题是自动换行不适用于标题/行。我使用了引导类，但仍然面临问题。我想修复表头，只有行应该是可滚动的，如果文本很长，它应该自动换行。我的应用程序中有多个列（大约 15 列）。请指教。

查看示例代码click here。

示例 html 代码：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <table id="myTable" class="table table-fixedheader table-bordered table-striped">
                    <thead>

                        <tr class="row">
                            <th class="col-md-3">Header1</th>
                            <th class="col-md-4">Header2Header2Header2Header2</th>
                            <th class="col-md-3">Header3</th>
                            <th class="col-md-4">Header4</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="row">
                            <td class="col-md-3">111111111111111111111111111111111111111111111111111111111111111111111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">5443545435354543</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">5437665</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">5435435443</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">68678454</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">786876</td>
                            <td class="col-md-3">8787876</td>
                            <td class="col-md-4">6765767</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">7656765</td>
                            <td class="col-md-4">656456</td>
                            <td class="col-md-3">116611</td>
                            <td class="col-md-4">43434</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">43243432434324342</td>
                            <td class="col-md-4">33344343233</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">4343</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">432434343243243</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">432443</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">333333</td>
                            <td class="col-md-3">111312312123121</td>
                            <td class="col-md-4">32112</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

【问题讨论】：

这是您的内容。自动换行仅在空格处中断。您的第一个 11111.... 只是一个没有空格的长字符串，因此它显示在一行上。我认为模式不是显示表格数据的最佳选择。或者增加模态框的大小，使其适合大部分屏幕。

标签： html css twitter-bootstrap html-table

【解决方案1】：

您可以尝试非表格方法。如果您可以在单元格中包含内容的列上设置宽度。这是一个例子https://codepen.io/flurrd/pen/jmMNxK?editors=1100

注意：这个例子中的类名很糟糕。我会 BEM 它以供正确使用。

.table-body {
  max-height: 200px;
  overflow-y:auto;
}
.t-row {
  display: flex;
  border-bottom: 1px solid grey;
}
.t-row:nth-child(even){
  background: #e3e3e3;
}
.col {
  word-wrap: break-word;
  flex: 1 0 30%;
  max-width: 33.3333%;
}
.cell {
  padding: 8px;
}


<div class="table-wrap">
  <div class="t-row t-header">
    <div class="col">
      <div class="cell">
        Header 1
      </div>
    </div>
    <div class="col">
      <div class="cell">
        Header 1
      </div>
    </div>
    <div class="col">
      <div class="cell">
        Header 1
      </div>
    </div>  
  </div>
  <div class="table-body">
    <div class="t-row">
      <div class="col">
        <div class="cell">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
      </div>
      <div class="col">
        <div class="cell">
          1111
        </div>
      </div>
      <div class="col">
        <div class="cell">
          11111111
        </div>
      </div>
    </div>  
  </div>
</div>

【讨论】：