如何在引導表中添加水平滾動條？

我需要在引導表中添加水平滾動條。我已將class = table-responsive分配給表格，但不顯示滾動條。當我向表中添加新內容時，它會顯示在我添加的現有內容下。我嘗試添加overflow-y:hidden;，但它不起作用。如何在引導表中添加水平滾動條？

.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

給請張貼您迄今所做的代碼的相關部分。 – Jomy

[This]（https://jsfiddle.net/xg127cLx/）是我在運行代碼後得到的。您將需要提供額外的HTML，CSS，以使其看起來像您的。順便說一句，看看[this]（http://www.w3schools.com/tags/tag_th.asp），看看如何定義表格。你已經使用''來處理整個''。 – Jomy

https://jsfiddle.net/Usman_Ali/zsxb01pg/8/ 在這裏你可以看到我的代碼示例 –

.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

如何在引導表中添加水平滾動條？

回答

相關問題