बूटस्ट्रैप 4 उत्तरदायी तालिकाएं 100% चौड़ाई नहीं लेंगी

Question 1

मैं बूटस्ट्रैप 4 का उपयोग करके एक वेब ऐप बना रहा हूं और कुछ अजीब मुद्दों पर चल रहा हूं। मैं बूटस्ट्रैप की तालिका-उत्तरदायी कक्षा का उपयोग मोबाइल उपकरणों पर तालिकाओं के क्षैतिज स्क्रॉलिंग की अनुमति देना चाहता हूं। डेस्कटॉप डिवाइसों पर तालिका में 100% की DIV की चौड़ाई होनी चाहिए।

जैसे ही मैं अपनी तालिका में .table-उत्तरदायी वर्ग को लागू करता हूं, तालिका क्षैतिज रूप से सिकुड़ जाती है और अब चौड़ाई का 100% नहीं लेती है। कोई विचार?

यहाँ मेरा मार्कअप है:

<!DOCTYPE html>
<html lang="en" class="mdl-js">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="application-name" content="">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
    <div class="container-fluid no-padding"> 
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive" id="Queue">
                    <thead>
                        <tr>
                            <th><span span="sr-only">Priority</span></th>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Mode</th>
                            <th>Date</th>
                            <th><span span="sr-only">Action</span></th>
                         </tr>
                      </thead>
                      <tbody>
                          <tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
                              <td>0</td>
                              <td>PHOENIX, AZ</td>
                              <td>SAN DIEGO, CA</td>
                              <td>DRIVING</td>
                              <td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
                              <td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
                          </tr>
                          <tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;">
                              <td colspan="6" class="no-padding"></td>
                          </tr>
                      </tbody>
                  </table>
              </div>
           </div>
           <br>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="/js/bundle.min.js"></script>
     </body>
</html>

यदि मैं .table-उत्तरदायी वर्ग में 100% चौड़ाई लागू करता हूं, तो यह तालिका को 100% चौड़ा बनाता है, लेकिन बाल तत्व (TBODY, TR, आदि) अभी भी संकीर्ण हैं।

Question 2

निम्नलिखित काम नहीं करता है। यह एक और समस्या का कारण बनता है। अब यह 100% चौड़ाई करेगा लेकिन यह छोटे उपकरणों पर उत्तरदायी नहीं होगा:

.table-responsive {
    display: table;
}

इन सभी उत्तरों ने सिफारिश करके एक और समस्या पेश की display: table;। अभी इसका एकमात्र समाधान रैपर के रूप में उपयोग करना है:

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>

Question 3

इस समाधान ने मेरे लिए काम किया:

अपनी तालिका तत्व में केवल एक और वर्ग जोड़ें: w-100 d-block d-md-table

तो यह होगा: <table class="table table-responsive w-100 d-block d-md-table">

बूटस्ट्रैप 4 के w-100लिए चौड़ाई 100% निर्धारित करें d-block(प्रदर्शन: ब्लॉक) और d-md-table(प्रदर्शन: न्यूनतम-चौड़ाई पर तालिका: 576px)

बूटस्ट्रैप 4 प्रदर्शन डॉक्स

Question 4

यदि आप V4.1 का उपयोग कर रहे हैं, और उनके डॉक्स के अनुसार, सीधे तालिका के लिए .table-उत्तरदायी असाइन न करें। तालिका। होनी चाहिए और यदि आप चाहते हैं कि यह क्षैतिज रूप से स्क्रॉल करने योग्य (उत्तरदायी) है तो इसे एक .table-उत्तरदायी कंटेनर (ए <div>, उदाहरण के लिए) के अंदर जोड़ें ।

उत्तरदायी तालिकाओं तालिकाओं को क्षैतिज रूप से आसानी से स्क्रॉल करने की अनुमति देती हैं। किसी भी तालिका को .table-उत्तरदायी के साथ।

<div class="table-responsive">
  <table class="table">
  ...
  </table>
</div>

ऐसा करने के लिए, किसी अतिरिक्त सीएसएस की जरूरत नहीं है।

ओपी के कोड में .table-उत्तरदायी का उपयोग .col-md-12 के साथ बाहर की तरफ किया जा सकता है।

Question 5

किसी कारण के लिए विशेष रूप से उत्तरदायी तालिका व्यवहार नहीं करती है जैसा कि इसे करना चाहिए। आप इससे छुटकारा पा सकते हैंdisplay:block;

.table-responsive {
    display: table;
}

मैं बग रिपोर्ट दर्ज कर सकता हूं।

संपादित करें:

यह एक मौजूदा बग है।

Question 6

इनमें से कोई भी उत्तर काम नहीं कर रहा है (आज दिनांक 9 दिसंबर 2018)। यहां सही समाधान अपनी तालिका में .table-उत्तरदायी-sm जोड़ने के लिए है:

<table class='table table-responsive-sm'>
[Your table]
</table>

यह केवल SM दृश्य (मोबाइल) पर जवाबदेही पहलू को लागू करता है। तो मोबाइल दृश्य में आपको स्क्रॉलिंग वांछित के रूप में मिलती है और बड़े दृश्यों में तालिका उत्तरदायी नहीं होती है और इस प्रकार वांछित के रूप में पूरी चौड़ाई प्रदर्शित होती है।

डॉक्स: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

Question 7

फ्रेमवर्क के v4 के साथ हल समाधान उचित विराम बिंदु सेट करना है। .Table-उत्तरदायी का उपयोग करने के बजाय, आपको .table-उत्तरदायी-sm (छोटे उपकरणों पर बस उत्तरदायी होने के लिए) का उपयोग करने में सक्षम होना चाहिए

आप उपलब्ध किसी भी समापन बिंदु का उपयोग कर सकते हैं: तालिका-उत्तरदायी {-sm | -md | -lg | -xl}

Question 8

ऐसा इसलिए है क्योंकि .table-responsiveवर्ग display: blockआपके तत्व में संपत्ति जोड़ता है जो इसे पिछले से बदलता है display: table।

display: tableअपनी प्रॉपर्टीशीट में इस प्रॉपर्टी को वापस ओवरराइड करें

.table-responsive {
    display: table;
}

नोट: सुनिश्चित करें कि यह शैली आपके बूटस्ट्रैप कोड के बाद इसे ओवरराइड करने के लिए निष्पादित करती है।

Question 9

यह table-responsiveतालिका की एक संपत्ति देने वाले वर्ग के कारण होता है display:block, जो अजीब है क्योंकि यह tableकक्षाओं को मूल रूप से अधिलेखित करता है display:tableऔर यही कारण है कि तालिका आपको जोड़ने के बाद सिकुड़ती है table-responsive।

सबसे अधिक संभावना है कि इसका बूटस्ट्रैप 4 अभी भी देव में है। आप इस गुण को अपने स्वयं के वर्ग के साथ सेट करने के लिए सुरक्षित हैं जो सेट करता है display:tableऔर यह तालिका की जवाबदेही को प्रभावित नहीं करेगा।

जैसे

.table-responsive-fix{
   display:table;
}

Question 10

अन्य उत्तरों को ध्यान में रखते हुए मैं ऐसा कुछ करूँगा, धन्यवाद!

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}

Question 11

.Table-responsive {{-md | -md | -lg | -xl} के साथ, किसी भी। 992px, और 1120px, क्रमशः।

केवल। टेबिल-उत्तरदायी-{-M | -md | -lg | -xl} के साथ तालिका लपेटें

उदाहरण के लिए

<div class="table-responsive-md">
    <table class="table">
    </table>
</div>

बूटस्ट्रैप 4 टेबल

Question 12

मैंने पाया कि एक रैपर में अनुशंसित टेबल-रेस्पॉन्सिव क्लास का उपयोग करने से अभी भी उत्तरदायी टेबल (आश्चर्यजनक रूप से) क्षैतिज रूप से सिकुड़ती हैं:

<div class="table-responsive-lg">
    <table class="table">
        ...
    </table>
</div>

मेरे लिए इसका समाधान निम्न मीडिया ब्रेकप्वाइंट और इसे रोकने के लिए कक्षाएं बनाना था:

.table-xs {
    width:544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

फिर मैं अपनी तालिका तत्व में उपयुक्त वर्ग जोड़ सकता हूं। उदाहरण के लिए:

<div class="table-responsive-lg">
    <table class="table table-lg">
        ...
    </table>
</div>

यहां रैपर बूटस्ट्रैप के लिए बड़े और अधिक से अधिक 100% की चौड़ाई निर्धारित करता है। तालिका तत्व पर लागू टेबल-एलजी वर्ग के साथ, तालिका की चौड़ाई भी बड़े और अधिक के लिए 100% पर सेट की जाती है, लेकिन मध्यम और छोटे के लिए 992px पर सेट होती है। कक्षाएं टेबल-एक्स, टेबल-एसएम, टेबल-एमडी और टेबल-एक्सएल उसी तरह से काम करती हैं।

Question 13

बूटस्ट्रैप के लिए 4.x उपयोग प्रदर्शन सुविधाएं:

w-100 d-print-block d-print-table

उपयोग :

<table class="table w-100 d-print-block d-print-table">

Question 14

ऐसा लगता है जैसे "sr-only" तत्व और तालिका के अंदर इसकी शैली इस बग का कारण बन रही हैं। कम से कम मेरे पास एक ही मुद्दा था और महीनों तक दीवार के खिलाफ अपना सिर पीटने के बाद हमने जो कारण निर्धारित किया वह था, हालांकि मुझे अभी भी समझ नहीं आया कि क्यों। left:0"Sr-only" शैलियों को जोड़कर इसे ठीक किया।