1
Мне нужно добавить горизонтальную полосу прокрутки в таблице начальной загрузки. Я уже назначил 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
Пожалуйста, пост соответствующие части кода вы сделали до сих пор. – Jomy
[Это] (https://jsfiddle.net/xg127cLx/) - это то, что я получил после запуска вашего кода. Вам нужно будет предоставить дополнительный html, css тоже, чтобы он выглядел как ваш. Кстати, посмотрите на [это] (http://www.w3schools.com/tags/tag_th.asp), чтобы узнать, как определяются «таблицы». Вы использовали '
https://jsfiddle.net/Usman_Ali/zsxb01pg/8/ Здесь вы можете увидеть мой пример кода –
ответ
Вы можете настроить
к минимальной ширине, которая вам нравится.
JS Fiddle
HTML <table>
является, как указано в hereисточник
2016-06-23 12:22:01 Jomy
Смежные вопросы