アライメントの問題

Question

ヘッダーを修正する必要がある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> 

Answer 1

1）あなたのヘッダtr中の細胞は、18列（7 + 4 + 3 + 4）の幅まで追加ブートストラップ・クラスを持っているが、1行のみ缶ブートストラップグリッドシステムに12個の列をフィットさせます。

2.）あなたはワードラップは適用されませんが、どこにでもワードラップのCSSルールはありません。

Answer 2

は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> 

これで問題が解決します。

Answer 3

シンプルなことだけが同じ構造（または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 --> 

オーケー：連続テキスト中のワードラップのために

"ワードブレイクを：ブレークのすべて;" を追加

.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; 
} 

Answer 4

repalceこの

次のCSSを追加し と の上にHTMLマークアップで 'テーブル・スクロール' クラスを参照してください

固定ヘッダ FOR

（以下CSSを参照してください）

<tr class ="row" > 

with this

詳細については、の

<tr> 

更新しフィドルhttp://jsfiddle.net/girish28892/ZcLSE/1431/