1. ホーム
  2. 質問と答え
  3. ブートストラップテーブルに水平スクロールバーを追加するには？

ブートストラップテーブルに水平スクロールバーを追加するには？

2016-06-23 19 views
1

ブートストラップテーブルに水平スクロールバーを追加する必要があります。 class = table-responsiveは既にテーブルに割り当てられていますが、スクロールバーは表示されません。そしてテーブルに新しいコンテンツを追加すると、それは私が追加する既存のコンテンツの下に表示されます。私はoverflow-y:hidden;を追加しようとしましたが、うまくいきません。 need to add scroll on selected areaブートストラップテーブルに水平スクロールバーを追加するには？

.out_headings { 
 
    border-left: 1px solid rgba(0, 0, 0, 0.3); 
 
    border-right: 1px solid rgba(0, 0, 0, 0.3); 
 
    border-top: 3px solid #0fc; 
 
} 
 
.out_headings h4 { 
 
    font-family: myfont; 
 
    font-weight: normal; 
 
    font-size: 15px; 
 
} 
 
.out_headings strong { 
 
    font-family: myfont; 
 
    font-weight: normal; 
 
    font-size: 17px; 
 
} 
 
.to { 
 
    color: #888; 
 
    font-weight: lighter; 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    font-size: 14px; 
 
    position: relative; 
 
    bottom: 1px; 
 
    color: rgba(0, 0, 0, 0.5); 
 
} 
 
.early_late { 
 
    background: #f2f2f2 !important; 
 
    padding: 0px; 
 
    line-height: 30px; 
 
    border-left: 1px solid rgba(0, 0, 0, 0.3); 
 
    border-right: 1px solid rgba(0, 0, 0, 0.3); 
 
    margin-bottom: -3px; 
 
} 
 
.ticket_price { 
 
    padding: 0px; 
 
} 
 
.early_late ul li a { 
 
    font-weight: bold; 
 
    font-size: 13px; 
 
} 
 
.span_left { 
 
    font-size: 12px !important; 
 
    top: 1px; 
 
    color: #09C; 
 
    left: 3px; 
 
    padding-left: 3px; 
 
} 
 
.table-striped { 
 
    border-top: 0px; 
 
} 
 
.ticket_price div { 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 
.ticket_price div button { 
 
    padding: 0px; 
 
    width: 100%; 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    border-left: 0px; 
 
    background: #fafafa; 
 
    padding-bottom: 5px; 
 
} 
 
button { 
 
    border-left: 1px solid rgba(0, 0, 0, 0.3) !important; 
 
} 
 
.ticket_price div button { 
 
    padding: 0px; 
 
    width: 100%; 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    border-left: 0px; 
 
    background: #fafafa; 
 
    padding-bottom: 5px; 
 
} 
 
button { 
 
    border-left: 1px solid rgba(0, 0, 0, 0.3) !important; 
 
} 
 
.ticket_price div button strong { 
 
    font-family: myfont; 
 
    font-weight: lighter; 
 
    font-size: 16px; 
 
} 
 
.time_in_btn { 
 
    color: #000; 
 
    font-size: 18px; 
 
} 
 
.ticket_price div button .glyphicon { 
 
    font-size: 8px; 
 
    color: #48d5b5; 
 
    position: relative; 
 
    padding: 5px 0px; 
 
} 
 
.ticket_price div button span { 
 
    font-size: 10px !important; 
 
    left: -3px; 
 
    color: #069; 
 
    display: block; 
 
} 
 
.ticket_price div button span { 
 
    font-size: 10px !important; 
 
    left: -3px; 
 
    color: #069; 
 
    display: block; 
 
} 
 
.ticket_price div { 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 
.select_price { 
 
    padding: 0px; 
 
    border: 1px solid #ffc022; 
 
    position: relative; 
 
    margin-top: 30px; 
 
} 
 
.select_price strong { 
 
    font-size: 12px; 
 
    background: #ffc022; 
 
    display: block; 
 
    line-height: 20px; 
 
} 
 
.select_price p { 
 
    font-weight: bold; 
 
    font-size: 13px; 
 
    margin-top: 5px; 
 
} 
 
.ticket_price div { 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 
.first_class_single { 
 
    border: 1px solid #ddd; 
 
    padding: 0px; 
 
    padding-top: 10px; 
 
} 
 
th { 
 
    padding: 0px !important; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-md-9 price_buttons_div pl0"> 
 
    <div class="col-xs-12 col-sm-6 inside_price_button_div_center"> 
 
    <div class="col-xs-12 out_headings"> 
 
     <h4> OUT </h4> 
 
     <strong>05/02/2016</strong> 
 
     <h4 class="cityname_h4">Lahore <span class="to">to</span> Faisalabad</h4> 
 
    </div> 
 
    <!-- Headings div_ends here --> 
 
    <div class="col-xs-12 early_late"> 
 
     <ul class="list-inline"> 
 
     <li class="pull-left"> 
 
      <a id="erly" class="erlier"> <span class="glyphicon glyphicon-menu-left span_left"></span> Earlier</a> 
 
     </li> 
 
     <li class="pull-right"> 
 
      <a id="late">Late <span class="glyphicon glyphicon-menu-right span_right"></span></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- earliery & late div ends here --> 
 
    <table class="table table-striped table-responsive"> 
 
     <tr> 
 
     <th> 
 
      <div class="col-xs-12 ticket_price"> 
 
      <div class="col-xs-3"> 
 
       <button type="button"> 
 
       <span class="city">LHR</span> 
 
       <strong class="time_in_btn">6:00</strong> 
 
       <span class="glyphicon glyphicon-arrow-down"> </span> 
 
       <span class="city">SMD</span> 
 
       <strong class="btn_time"> 9:30 </strong> 
 
       <span style="color:grey;">3h 30m</span> 
 
       </button> 
 
       <div class="col-xs-12 select_price"> 
 
       <strong>Cheapest</strong> 
 
       <input type="radio" name="price" value="250" /> 
 
       <p>Rs 250</p> 
 
       </div> 
 
       <div class="col-xs-12 first_class_single"> 
 
       <input type="radio" name="price" value="400" /> 
 
       <p>Rs 400</p> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-3"> 
 
       <button type="button"> 
 
       <span class="city">LHR</span> 
 
       <strong class="time_in_btn">6:00</strong> 
 
       <span class="glyphicon glyphicon-arrow-down"> </span> 
 
       <span class="city">SMD</span> 
 
       <strong class="btn_time"> 9:30 </strong> 
 
       <span style="color:grey;">3h 30m</span> 
 
       </button> 
 
       <div class="col-xs-12 select_price"> 
 
       <strong>Cheapest</strong> 
 
       <input type="radio" name="price" value="250" /> 
 
       <p>Rs 250</p> 
 
       </div> 
 
       <div class="col-xs-12 first_class_single"> 
 
       <input type="radio" name="price" value="400" /> 
 
       <p>Rs 400</p> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-3"> 
 
       <button type="button"> 
 
       <span class="city">LHR</span> 
 
       <strong class="time_in_btn">6:00</strong> 
 
       <span class="glyphicon glyphicon-arrow-down"> </span> 
 
       <span class="city">SMD</span> 
 
       <strong class="btn_time"> 9:30 </strong> 
 
       <span style="color:grey;">3h 30m</span> 
 
       </button> 
 
       <div class="col-xs-12 select_price"> 
 
       <strong>Cheapest</strong> 
 
       <input type="radio" name="price" value="250" /> 
 
       <p>Rs 250</p> 
 
       </div> 
 
       <div class="col-xs-12 first_class_single"> 
 
       <input type="radio" name="price" value="400" /> 
 
       <p>Rs 400</p> 
 
       </div> 
 
      </div> 
 

 

 
      <div class="col-xs-3"> 
 
       <button type="button"> 
 
       <span class="city">LHR</span> 
 
       <strong class="time_in_btn">6:00</strong> 
 
       <span class="glyphicon glyphicon-arrow-down"> </span> 
 
       <span class="city">SMD</span> 
 
       <strong class="btn_time"> 9:30</strong> 
 
       <span style="color:grey;">3h 30m</span> 
 
       </button> 
 
       <div class="col-xs-12 select_price"> 
 
       <strong>Cheapest</strong> 
 
       <input type="radio" name="price" value="250" /> 
 
       <p>Rs 250</p> 
 
       </div> 
 
       <div class="col-xs-12 first_class_single"> 
 
       <input type="radio" name="price" value="400" /> 
 
       <p>Rs 400</p> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-3"> 
 
       <button type="button"> 
 
       <span class="city">LHR</span> 
 
       <strong class="time_in_btn">6:00</strong> 
 
       <span class="glyphicon glyphicon-arrow-down"> </span> 
 
       <span class="city">SMD</span> 
 
       <strong class="btn_time"> 9:30</strong> 
 
       <span style="color:grey;">3h 30m</span> 
 
       </button> 
 
       <div class="col-xs-12 select_price"> 
 
       <strong>Cheapest</strong> 
 
       <input type="radio" name="price" value="250" /> 
 
       <p>Rs 250</p> 
 
       </div> 
 
       <div class="col-xs-12 first_class_single"> 
 
       <input type="radio" name="price" value="400" /> 
 
       <p>Rs 400</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <!-- ticket_price --> 
 
     </th> 
 
     </tr> 
 
    </table> 
 

 

 
    </div> 
 
    <!-- inside_price_button_div_center ends here -->

JS Fiddle

出典

2016-06-23 Usman-Ali

+0

に与えられているようあなたがこれまでに行っているコードの関連部分を投稿してください。 – Jomy

+0

[This]（https://jsfiddle.net/xg127cLx/）はコードを実行した後のものです。あなたのように見えるようにするには、追加のHTML、CSSも提供する必要があります。 Btw、 'this '（http://www.w3schools.com/tags/tag_th.asp）を見て' tables'がどのように定義されているかを見てください。 ''全体に ''を使用しています。 – Jomy

+0

https://jsfiddle.net/Usman_Ali/zsxb01pg/8/ ここで私のコード例を見ることができます –

答えて

1 

.out_headings { 
 
    border-left: 1px solid rgba(0, 0, 0, 0.3); 
 
    border-right: 1px solid rgba(0, 0, 0, 0.3); 
 
    border-top: 3px solid #0fc; 
 
} 
 
.out_headings h4 { 
 
    font-family: myfont; 
 
    font-weight: normal; 
 
    font-size: 15px; 
 
} 
 
.out_headings strong { 
 
    font-family: myfont; 
 
    font-weight: normal; 
 
    font-size: 17px; 
 
} 
 
.to { 
 
    color: #888; 
 
    font-weight: lighter; 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    font-size: 14px; 
 
    position: relative; 
 
    bottom: 1px; 
 
    color: rgba(0, 0, 0, 0.5); 
 
} 
 
.early_late { 
 
    background: #f2f2f2 !important; 
 
    padding: 0px; 
 
    line-height: 30px; 
 
    border-left: 1px solid rgba(0, 0, 0, 0.3); 
 
    border-right: 1px solid rgba(0, 0, 0, 0.3); 
 
    margin-bottom: -3px; 
 
} 
 
.ticket_price { 
 
    padding: 0px; 
 
} 
 
.early_late ul li a { 
 
    font-weight: bold; 
 
    font-size: 13px; 
 
} 
 
.span_left { 
 
    font-size: 12px !important; 
 
    top: 1px; 
 
    color: #09C; 
 
    left: 3px; 
 
    padding-left: 3px; 
 
} 
 
.table-striped { 
 
    border-top: 0px; 
 
} 
 
.ticket_price div { 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 
.ticket_price div button { 
 
    padding: 0px; 
 
    width: 100%; 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    border-left: 0px; 
 
    background: #fafafa; 
 
    padding-bottom: 5px; 
 
} 
 
button { 
 
    border-left: 1px solid rgba(0, 0, 0, 0.3) !important; 
 
} 
 
.ticket_price div button { 
 
    padding: 0px; 
 
    width: 100%; 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    border-left: 0px; 
 
    background: #fafafa; 
 
    padding-bottom: 5px; 
 
} 
 
button { 
 
    border-left: 1px solid rgba(0, 0, 0, 0.3) !important; 
 
} 
 
.ticket_price div button strong { 
 
    font-family: myfont; 
 
    font-weight: lighter; 
 
    font-size: 16px; 
 
} 
 
.time_in_btn { 
 
    color: #000; 
 
    font-size: 18px; 
 
} 
 
.ticket_price div button .glyphicon { 
 
    font-size: 8px; 
 
    color: #48d5b5; 
 
    position: relative; 
 
    padding: 5px 0px; 
 
} 
 
.ticket_price div button span { 
 
    font-size: 10px !important; 
 
    left: -3px; 
 
    color: #069; 
 
    display: block; 
 
} 
 
.ticket_price div button span { 
 
    font-size: 10px !important; 
 
    left: -3px; 
 
    color: #069; 
 
    display: block; 
 
} 
 
.ticket_price div { 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 
.select_price { 
 
    padding: 0px; 
 
    border: 1px solid #ffc022; 
 
    position: relative; 
 
    margin-top: 30px; 
 
} 
 
.select_price strong { 
 
    font-size: 12px; 
 
    background: #ffc022; 
 
    display: block; 
 
    line-height: 20px; 
 
} 
 
.select_price p { 
 
    font-weight: bold; 
 
    font-size: 13px; 
 
    margin-top: 5px; 
 
} 
 
.ticket_price div { 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 
.first_class_single { 
 
    border: 1px solid #ddd; 
 
    padding: 0px; 
 
    padding-top: 10px; 
 
} 
 
th{padding:0px !important;} 
 

 
td{ 
 
    min-width:155px; /* force table to be oversize */ 
 
    padding:0px !important; 
 
} 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="col-md-9 price_buttons_div pl0"> 
 
    <div class="row"> 
 
     <div class="col-xs-12 col-sm-6 inside_price_button_div_center"> 
 
     <div class="col-xs-12 out_headings"> 
 
      <h4> OUT </h4> 
 
      <strong>05/02/2016</strong> 
 
      <h4 class="cityname_h4">Lahore <span class="to">to</span> Faisalabad</h4> 
 
     </div> 
 
     <!-- Headings div_ends here --> 
 

 
     <div class="col-xs-12 early_late"> 
 
      <ul class="list-inline"> 
 
      <li class="pull-left"> 
 
       <a id="erly" class="erlier"> <span class="glyphicon glyphicon-menu-left span_left"></span> Earlier</a> 
 
      </li> 
 
      <li class="pull-right"> 
 
       <a id="late">Late <span class="glyphicon glyphicon-menu-right span_right"></span></a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <!-- earliery & late div ends here --> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-12 col-sm-6"> 
 
     <div class="table-responsive"> 
 
      <table class="table table-striped"> 
 
      <thead> 
 
       <tr> 
 
       <th class="ticket_price"> 
 
        <div> 
 
        <button type="button"> 
 
         <span class="city">LHR</span> 
 
         <strong class="time_in_btn">6:00</strong> 
 
         <span class="glyphicon glyphicon-arrow-down"> </span> 
 
         <span class="city">SMD</span> 
 
         <strong class="btn_time"> 9:30 </strong> 
 
         <span style="color:grey;">3h 30m</span> 
 
        </button> 
 
        </div> 
 
       </th> 
 
       <th class="ticket_price"> 
 
        <div> 
 
        <button type="button"> 
 
         <span class="city">LHR</span> 
 
         <strong class="time_in_btn">6:00</strong> 
 
         <span class="glyphicon glyphicon-arrow-down"> </span> 
 
         <span class="city">SMD</span> 
 
         <strong class="btn_time"> 9:30 </strong> 
 
         <span style="color:grey;">3h 30m</span> 
 
        </button> 
 
        </div> 
 
       </th> 
 
       <th class="ticket_price"> 
 
        <div> 
 
        <button type="button"> 
 
         <span class="city">LHR</span> 
 
         <strong class="time_in_btn">6:00</strong> 
 
         <span class="glyphicon glyphicon-arrow-down"> </span> 
 
         <span class="city">SMD</span> 
 
         <strong class="btn_time"> 9:30 </strong> 
 
         <span style="color:grey;">3h 30m</span> 
 
        </button> 
 
        </div> 
 
       </th> 
 
       <th class="ticket_price"> 
 
        <div> 
 
        <button type="button"> 
 
         <span class="city">LHR</span> 
 
         <strong class="time_in_btn">6:00</strong> 
 
         <span class="glyphicon glyphicon-arrow-down"> </span> 
 
         <span class="city">SMD</span> 
 
         <strong class="btn_time"> 9:30 </strong> 
 
         <span style="color:grey;">3h 30m</span> 
 
        </button> 
 
        </div> 
 
       </th> 
 
       <th class="ticket_price"> 
 
        <div> 
 
        <button type="button"> 
 
         <span class="city">LHR</span> 
 
         <strong class="time_in_btn">6:00</strong> 
 
         <span class="glyphicon glyphicon-arrow-down"> </span> 
 
         <span class="city">SMD</span> 
 
         <strong class="btn_time"> 9:30 </strong> 
 
         <span style="color:grey;">3h 30m</span> 
 
        </button> 
 
        </div> 
 
       </th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td class="text-center select_price"> 
 
        <strong>Cheapest</strong> 
 
        <input type="radio" name="price" value="250" /> 
 
        <p>Rs 250</p> 
 
       </td> 
 
       <td class="text-center select_price"> 
 
        <strong>Cheapest</strong> 
 
        <input type="radio" name="price" value="250" /> 
 
        <p>Rs 250</p> 
 
       </td> 
 
       <td class="text-center select_price"> 
 
        <strong>Cheapest</strong> 
 
        <input type="radio" name="price" value="250" /> 
 
        <p>Rs 250</p> 
 
       </td> 
 
       <td class="text-center select_price"> 
 
        <strong>Cheapest</strong> 
 
        <input type="radio" name="price" value="250" /> 
 
        <p>Rs 250</p> 
 
       </td> 
 
       <td class="text-center select_price"> 
 
        <strong>Cheapest</strong> 
 
        <input type="radio" name="price" value="250" /> 
 
        <p>Rs 250</p> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td class="text-center first_class_single"> 
 
        <input type="radio" name="price" value="400" /> 
 
        <p>Rs 400</p> 
 
       </td> 
 
       <td class="text-center first_class_single"> 
 
        <input type="radio" name="price" value="400" /> 
 
        <p>Rs 400</p> 
 
       </td> 
 
       <td class="text-center first_class_single"> 
 
        <input type="radio" name="price" value="400" /> 
 
        <p>Rs 400</p> 
 
       </td> 
 
       <td class="text-center first_class_single"> 
 
        <input type="radio" name="price" value="400" /> 
 
        <p>Rs 400</p> 
 
       </td> 
 
       <td class="text-center first_class_single"> 
 
        <input type="radio" name="price" value="400" /> 
 
        <p>Rs 400</p> 
 
       </td> 
 
       </tr> 
 

 

 
      </tbody> 
 

 

 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

あなたは 

td{ 
    min-width:155px; /* force table to be oversize */ 
}

を調整することができますあなたが好きな最小の幅に。
JS Fiddle
HTML <table>はhere

出典

2016-06-23 12:22:01 Jomy

関連する問題

 関連する問題