オーバーフローがautoに設定された2つのdivがあり、ブートストラップパネルが含まれています。ブートストラップパネルのヘッダーがスクロール可能なdiv内に100％含まれていない

私は両方のdivsを同期的にインラインで動作させようとしています。

しかし、2つの問題があります。

1）テキストがラップされているので、私はwhite-space:nowrap;を使用していましたが、2番目の問題が発生しました。

2）今のようにすぐに私は、ヘッダーは、誰もが問題を解決する方法を指摘してくださいすることができ、本体

まで拡張されていないスクロールします。 jsfiddle

ありがとうございます！

var $divs = $('#generalContainer, #dataContainer'); 
 
var sync = function(e){ 
 
    var me = $(this); 
 
    var $other = $divs.not(me).off('scroll'); 
 
    $divs.not(me).each(function (index) { 
 
     $(this).scrollLeft(me.scrollLeft()); 
 
    }); 
 
    setTimeout(function() { 
 
     $other.on('scroll', sync); 
 
    }, 10); 
 
} 
 
$divs.on('scroll', sync);

.panel-heading .chevron:after { 
 
    content: "\f078"; 
 
} 
 
.panel-heading.collapsed .chevron:after { 
 
    content: "\f054"; 
 
} 
 

 
#generalContainer, #dataContainer{ 
 
    width: 1050px; 
 
    height: 300px; 
 
    overflow: auto; 
 
} 
 
.panel-body{ 
 
    font-size: 7pt; 
 
    white-space:nowrap; 
 
} 
 
#generalContainer{ 
 
    
 
} 
 

 
#dataContainer{ 
 
    
 
} 
 

 
.general-head-col-width{ 
 
    width: 200px; 
 
    padding: 5px 10px 10px 5px; 
 
} 
 

 
.general-col-width{ 
 
    width: 620px; 
 
    padding: 5px 10px 10px 5px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 

 
<div id="generalContainer" > 
 

 
<div class="panel panel-primary"> 
 
<div class="panel-heading clearfix" data-toggle="collapse" data-target="#generalInfo"> General <i class="chevron fa fa-fw"></i></div> 
 
\t <div class="panel-body" id="generalInfo"> 
 
\t \t <table> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Number</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110027</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110032</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110046</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110046</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110046</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110046</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110051</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110051</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110051</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110126</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110126</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110131</span></td></tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Type</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Name</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item. This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item. This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">PA</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1413-Ovenware</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1511-Dinnerware and serving</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1521-Drinking glasses</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1521-Drinking glasses</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1521-Drinking glasses</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1521-Drinking glasses</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>0821-Chairs incl covers, folding chairs and benches</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>0821-Chairs incl covers, folding chairs and benches</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>0821-Chairs incl covers, folding chairs and benches</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1711-Outdoor dining tables</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1711-Outdoor dining tables</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>0934-Textiles for small children</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Another Option</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Supplier</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>20774-OOO Xxxxxx</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>17987-Xxxxx. ABCDEF ghi</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Type1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Final</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Final</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Status</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>INTERMEDIATE</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>INTERMEDIATE</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>INTERMEDIATE</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Date</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2009-10-02</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2011-02-11</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-01-15</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-01-15</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2009-11-24</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-02-27</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2009-11-03</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2009-10-02</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2009-10-02</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2013-10-18</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-04-13</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2009-10-02</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Latest Update</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-10-27</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-06-09</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-01-15</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-01-15</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-12-17</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-02-27</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-06-09</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-10-27</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-10-27</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-10-30</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-04-13</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-06-09</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>5</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>4</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>5</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>3</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Edition</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>3</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>3</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>4</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>6</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>6</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Validity</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-02-28-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-04-14-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td></tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Date1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-02-27</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-04-13</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td></tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t </div> 
 
</div> 
 

 
</div> 
 

 
<div id="dataContainer"> 
 

 
\t <div class="panel panel-info"> 
 
\t \t <div class="panel-heading collapsed" data-toggle="collapse" data-target="#RequiredCP">Package <i class="chevron fa fa-fw"></i></div> 
 
\t \t \t <div class="panel-body collapse" id="RequiredCP">         
 
\t \t \t <table> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Number</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110027</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110032</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110046</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110046</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110046</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110046</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110051</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110051</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110051</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110126</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110126</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>00110131</span></td></tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Type</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>ABC</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Name</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item. This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item. This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>This is a sample item. This is a sample item. This is a sample item.</span></td> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">PA</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1413-Ovenware</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1511-Dinnerware and serving</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1521-Drinking glasses</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1521-Drinking glasses</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1521-Drinking glasses</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1521-Drinking glasses</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>0821-Chairs incl covers, folding chairs and benches</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>0821-Chairs incl covers, folding chairs and benches</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>0821-Chairs incl covers, folding chairs and benches</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1711-Outdoor dining tables</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1711-Outdoor dining tables</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>0934-Textiles for small children</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Another Option</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>No</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Supplier</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>20774-OOO Xxxxxx</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>17987-Xxxxx. ABCDEF ghi</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Type1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Final</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Final</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>Immediate</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Status</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>INTERMEDIATE</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>INTERMEDIATE</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>INTERMEDIATE</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>COMPLETED</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Date</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2009-10-02</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2011-02-11</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-01-15</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-01-15</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2009-11-24</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-02-27</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2009-11-03</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2009-10-02</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2009-10-02</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2013-10-18</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-04-13</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2009-10-02</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Latest Update</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-10-27</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-06-09</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-01-15</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-01-15</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-12-17</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-02-27</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-06-09</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-10-27</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-10-27</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-10-30</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-04-13</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-06-09</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">No</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>5</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>4</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>5</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>3</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Edition</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>3</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>3</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>4</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>6</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>6</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>1</span></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Validity</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-02-28-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-04-14-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td></tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <td class="general-head-col-width" ><span class="Caption">Date1</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2016-02-27</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>2015-04-13</span></td> 
 
\t \t \t \t <td class="general-col-width"><span>-</span></td></tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t \t </div> 
 
\t </div> 
 
          
 
</div>

出典

2016-06-27 Nikhil Gupta

あなたのテーブルには、常に同じ幅を持っていますか？ – makshh

多かれ少なかれ。 –

溶液でアップデート：

あなたのコンテナに一致するように.panelと分の幅に表示インラインブロックを追加します。

.panel { 
    display: inline-block; 
    min-width: 1050px; 
}

出典

2016-06-27 17:47:57

あなたの答えは質問と共通していますか？ – makshh

@makshhについてお話しますか？質問を読むと、あなたはこれが身体の100％を伸ばしていないパネルの問題に答えるでしょう。 –

@Derekページのすべてのパネルを100％にしたい。インラインブロックの追加は、パネルが展開されているときはうまく動作しますが、折りたたまれたときはボタンのようになります。また、折りたたまれたときにもう一方のパネルがインラインになり、レイアウトが変わります。そして、これはフィドルとUの違いになります。 –

あなたはこのためにjQueryを使用することができます。

var collapse = $('.collapse') 
collapse.css({ position: "absolute", visibility: "hidden", display: "block" }); 
$('table').each(function() { 
    $(this).closest('.panel').css('width', $(this).width() + 30).find('.panel-heading').css('width', $(this).width() + 30); 
}); 
collapse.css({ position: "", visibility: "", display: "" });

JSFiddle

出典

2016-06-27 17:49:42 makshh

これはうまくいくが、jqueryが入る前に実際にパネルのヘッダが終わっている行を見ることができる。 –

ああ、はい。 – makshh

ブートストラップパネルのヘッ​​ダーがスクロール可能なdiv内に100％含まれていない

答えて

JSFiddle

関連する問題

ブートストラップパネルのヘッダーがスクロール可能なdiv内に100％含まれていない