對齊問題

我有一個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.）在頭tr細胞具有自舉類，其加起來18列（7 + 4 + 3 + 4）的寬度，但是一列僅可在自舉網格系統中安裝12列。

2.）你寫的是wordwrap沒有應用，但是你沒有任何關於wordwrap的CSS規則。

來源

2017-04-23 13:51:48 Johannes

謝謝你的信息，在我的應用我有各自不同寬度的16列。很少的列顯示評論，信息等文字。而少數列只顯示count，percentage等數字。那麼我可以使用bootstrap類嗎？因爲bootstrap行只能適合12列。請諮詢 – DIM

您使用的Bootstrap類都有百分比寬度，並且這些是爲12列網格而設計的，請參閱：http://getbootstrap.com/css/#grid如果您的課程加起來多於它們，它們將移動到下一行（在正常行 - 表格標記可能會強制它們保持一行，但它們的寬度仍然超過100％寬度） – Johannes

PS：你當然可以使用* other * bootstrap類，這樣總和最多可以達到12，就像5 + 2 + 3 + 2 ... – Johannes

您使用.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

只錯過了一件簡單的事情就是使用相同的結構（或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

@ NBaua - 沒有不工作。請用你的代碼找到小提琴http://jsfiddle.net/ZcLSE/1414/。首先是標題不固定，第二個問題是自動換行不適用於數據。 – DIM

repalce這

<tr class ="row" >

與此

<tr>

更新後的提琴http://jsfiddle.net/girish28892/ZcLSE/1431/

來源

2017-04-30 01:29:08

回答

相關問題