如何在bootstrap表中添加水平滚动条？

时间：2016-06-23 05:32:19

标签： twitter-bootstrap-3

我需要在bootstrap表中添加水平滚动条。我已将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

1 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
  .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 -->
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;
您可以调整

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

到你喜欢的最小宽度。
JS Fiddle
HTML <table>与here

中的内容相同
相关问题
最新问题