10
की बजाय पूरी साइट पर दिखाई देता है जब मेरी स्क्रीन चौड़ाई न्यूनतम चौड़ाई से छोटी हो जाती है, तो मेरी तालिका प्रदर्शित होती है, table-responsive रैपर पर क्षैतिज स्क्रॉलबार प्राप्त करने के बजाय, यह मेरी पूरी साइट की चौड़ाई बढ़ा रही है। मैंने हर एसओ समाधान की कोशिश की है जिसे मैं बिना किसी किस्मत के पार आया हूं।बूटस्ट्रैप 3 टेबल-उत्तरदायी काम नहीं कर रहा है। X-scrollbar तालिका
मुझे संदेह है कि इसमें मेरे फ्लेक्सबॉक्स स्टाइल के साथ कुछ करना है। असल में, मैंने अपनी साइट स्टाइल की है ताकि मेरा मुख्य पृष्ठ सामग्री अनुभाग (जो <div id="aspnet-placeholder-content" class="container"></div> के अंदर रहता है) फूटर और चिपचिपा हेडर के लिए व्यूपोर्ट की शेष ऊंचाई ले लेगा। अभी तक मुझे इसके अलावा कोई समस्या नहीं है।
मैं अपनी साइट की चौड़ाई बढ़ाने से तालिका को कैसे रोक सकता हूं?
संपादित करें: Here's a JSFiddle यदि आपको SO की अंतर्निहित स्निपेट कार्यक्षमता पसंद नहीं है।
$(document).ready(function() {
$("a").on("click", function(e) {
e.preventDefault();
})
$("form").on("submit", function(e) {
e.preventDefault();
})
});body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
form.page-wrapper {
padding: 51px 0 0;
position: static;
height: 100%;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
section#body-content {
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
section#body-content #subheader {
background: #7e5bbd;
padding-top: 35px;
padding-bottom: 35px;
}
#aspnet-placeholder-content {
flex: 1 0 auto;
}
footer {
background: url("https://s25.postimg.org/4ylsw3w0v/brushed-metal-horizontal-darker-450.jpg") center top;
padding-top: 30px;
padding-bottom: 30px;
margin-top: 20px;
}
@media (min-width: 768px) {
footer .footer-content div:first-child {
text-align: right;
border-right: 1px solid #868686;
}
footer .footer-content div:nth-child(2) {
text-align: left;
border-left: 1px solid #868686;
}
}
footer h5 {
color: #868686;
}
@media (max-width: 767px) {
.padding-left-none-sm,
.padding-right-none-sm {
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 768px) {
.padding-left-none-sm {
padding-left: 0;
}
.padding-right-none-sm {
padding-right: 0;
}
.text-right-sm {
text-align: right;
}
.text-left-sm {
text-align: left;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form class="page-wrapper">
<header class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Logo</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="liHome"><a href="/">Home</a></li>
<li class="dropdown" id="liService">
<a href="/" data-toggle="dropdown" class="dropdown-toggle">Service <i style="font-size:x-small; opacity:0.4;" class="fa fa-chevron-down" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu dropdown-menu-left">
<li><a href="/">Create Ticket</a></li>
<li><a href="/">View Tickets</a></li>
</ul>
</li>
<li id="liProposals">
<a href="/">Proposals</a>
</li>
<li id="liProjects">
<a href="/">Projects</a>
</li>
<li id="liDocuments">
<a href="/">Documents</a>
</li>
</ul>
</div>
</div>
</header>
<section id="body-content">
<div id="subheader">
<div class="container">
<div class="col-sm-2 col-sm-push-10 padding-right-none-sm" style="text-align: right;">
<button type="submit" class="btn btn-secondary" id="btnLogout"><strong>Sign out</strong></button>
</div>
<div class="col-sm-5 col-sm-pull-2 padding-left-none-sm">
<div class="button-group">
<select id="ddlLocations" class="form-control">
<option selected="selected" value="0">(select option)</option>
<option value="7889">Option 1</option>
<option value="8736">Option 2</option>
<option value="10398">Option 3</option>
</select>
</div>
</div>
</div>
</div>
<div id="aspnet-placeholder-content" class="container">
<!--This is where page-specific server-generated content from ASP.NET will render-->
<h3>Page Title</h3>
<br>
<div style="overflow-x: auto">
<table id="tblLocs" class="table table-striped">
<tbody>
<tr>
<th>System</th>
<th>Location Type</th>
<th>Location</th>
<th style="text-align: center;">Wired</th>
<th style="text-align: center;">Equipped</th>
<th style="text-align: center;">Programmed</th>
<th style="text-align: center;">Tested</th>
</tr>
<tr>
<td>Access Control</td>
<td>Computer Station</td>
<td>2nd Floor IT Room</td>
<td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Security Office</td>
<td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
</tr>
<tr>
<td> </td>
<td>Badging Station</td>
<td>Security Desk</td>
<td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
</tr>
<tr>
<td> </td>
<td>Panel Location</td>
<td>1st Floor Comm and Data Room</td>
<td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>IT Closet</td>
<td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row text-center footer-content">
<div class="col-sm-6">
<h5>Footer text</h5>
</div>
<div class="col-sm-6">
<h5>Copyright stuff</h5>
</div>
</div>
</div>
</footer>
</form>
</body>
यह के भीतर एक _vertical_ स्क्रॉलबार बनाता है मेरी '# aspnet-placeholder-content' div, और यह' .container' स्टाइल टी का कारण बनता है o पृष्ठ चौड़ाई का 100% लेते हुए अनदेखा किया जाना चाहिए। यह मेरी समस्या का समाधान नहीं करता है, और दो नए पेश करता है। –
iv'e ने जवाब संपादित किया - उम्मीद है कि मैं मदद की थी! –