1. 首页
  2. 问答
  3. 对齐问题

对齐问题

2017-04-23 152 views
0

我有一个html表头，它的标题需要修复。我正在使用引导类来修复html头文件，但是我看到很多问题。 请查阅样本here。 我面临的问题是不从第一列开始显示标题，字换行不适用于列标题或列。请指教。有没有更好的方法来解决这个问题。对齐问题

HTML代码：

<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-7">Header1</th><th class="col-md-4">Header2</th><th class="col-md-3">Header3</th><th class="col-md-4">Header4</th></tr> 
</thead><tbody> 
<tr><td>1111</td><td>33333</td><td>1111</td><td>3333322222222222222222222222222222</td></tr> 
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> 
<tr><td>112222222222222215555555551</td><td>33333</td><td>1111</td><td>33333</td></tr>   
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> 
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> 
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> 
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>   
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> 
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> 
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> <tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>   
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> 
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> 
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> <tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>   
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> 
</tbody> </table> 
</div>

来源

2017-04-23 DIM

回答

1

1.）在头tr细胞具有自举类，其加起来18列（7 + 4 + 3 + 4）的宽度，但是一列仅可在自举网格系统中安装12列。

2.）你写的是wordwrap没有应用，但是你没有任何关于wordwrap的CSS规则。

来源

2017-04-23 13:51:48 Johannes

+0

谢谢你的信息，在我的应用我有各自不同宽度的16列。很少的列显示评论，信息等文字。而少数列只显示count，percentage等数字。那么我可以使用bootstrap类吗？因为bootstrap行只能适合12列。请咨询 – DIM

+0

您使用的Bootstrap类都有百分比宽度，并且这些是为12列网格而设计的，请参阅：http://getbootstrap.com/css/#grid如果您的课程加起来多于它们，它们将移动到下一行（在正常行 - 表格标记可能会强制它们保持一行，但它们的宽度仍然超过100％宽度） – Johannes

+0

PS：你当然可以使用* other * bootstrap类，这样总和最多可以达到12，就像5 + 2 + 3 + 2 ... – Johannes

1

您使用.row类上只有一排：

<tr class="row"> 
<th class="col-md-7">Header1</th> 
<th class="col-md-4">Header2</th> 
<th class="col-md-3">Header3</th> 
<th class="col-md-4">Header4</th> 
</tr>

您既可以使用各行上同一类或者删除它，离开行，而不一类。

<tr></tr>

这会解决您的问题。

来源

2017-04-23 13:57:02 iSR5

1

只错过了一件简单的事情就是使用相同的结构（或CSS类），我从你的小提琴中检查了代码，这应该适用于你提出的场景。

<!-- Button trigger modal --> 
<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 table-scroll"> 
        <thead> 

         <tr class="row"> 
          <th class="col-md-3">Header1</th> 
          <th class="col-md-4">Header2</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">1111</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 -->

好：

对于连续文本自动换

增 “字突破：突破 - 所有;” （请参见下面的CSS）

固定头

请参考 '表滚动' 类的HTML标记上面 和 添加以下CSS：

.modal-body { 
    /*max-height: calc(100vh - 210px);*/ 
    height:300px; 
    width:90%; 
    overflow: hidden; 
    word-break: break-all; 

} 


.table-scroll tbody { 
    position: absolute; 
    overflow-y: scroll; 
    height: 400px; 
} 

.table-scroll tr { 
    width: 100%; 
    table-layout: fixed; 
    display: inline-table; 
} 

.table-scroll thead > tr > th { 
    border: none; 
}

来源

2017-04-23 15:35:57 NBaua

+0

@ NBaua - 没有不工作。请用你的代码找到小提琴http://jsfiddle.net/ZcLSE/1414/。首先是标题不固定，第二个问题是自动换行不适用于数据。 – DIM

相关问题

 相关问题