HTML टेबल में क्षैतिज स्क्रॉलबार जोड़ें

Question

वहाँ एक HTML स्क्रॉल करने के लिए एक क्षैतिज स्क्रॉलबार जोड़ने का एक तरीका है? मुझे वास्तव में यह स्क्रॉल करने की आवश्यकता है कि दोनों ऊर्ध्वाधर और क्षैतिज रूप से इस बात पर निर्भर करते हैं कि तालिका कैसे बढ़ती है लेकिन मैं दिखाई देने के लिए या तो स्क्रॉलबार नहीं प्राप्त कर सकता हूं।

Comments

... एक डिव में पूरी मेज लगाने के बारे में सोचा? ... तो div में स्क्रॉल जोड़ें?

— वेक्टर

शायद बदलने का समय है जो स्वीकृत उत्तर होने का उत्तर देता है?

— सर्ज स्ट्रोबंड्ट

Answer 1

क्या आपने सीएसएस overflowसंपत्ति की कोशिश की ?

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

अद्यतन
अन्य उपयोगकर्ता इंगित कर रहे हैं, यह स्क्रॉलबार जोड़ने के लिए पर्याप्त नहीं है ।
तो कृपया नीचे दिए गए टिप्पणियों और उत्तरों को देखें और बढ़ाएं।

Comments

अपने स्वयं के प्रयासों और बाकी सब कुछ जो मैंने इंटरनेट पर पढ़ा है, उसके अनुसार यह काम नहीं करेगा। आप एक आवरण तत्व को ओवरफ्लो कर सकते हैं, निश्चित रूप से, लेकिन तालिका ही नहीं।

— ब्लौडरमिल्क

@bloudermilk यदि आप जोड़ सकते हैं display: block।

— सेस टिम्मरमैन

Answer 2

सबसे पहले, display: blockअपनी तालिका बनाएं

फिर, पर सेट overflow-x:करें auto।

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

अच्छा और साफ। कोई शानदार स्वरूपण नहीं।

यहाँ तालिका कैप्शन स्क्रॉल के साथ और अधिक शामिल उदाहरण अपनी वेबसाइट पर एक पृष्ठ से।

Comments

यह क्रोम में मेरे लिए काम करता है, लेकिन सब कुछ एक साथ करने के बाद ही। white-space: nowrap;स्क्रॉलबार देखने में तुरंत मदद करता है।

— सेस टिम्मरमैन

मैंने वास्तव में पहले भी यह कोशिश की थी। एकमात्र मुद्दा यह था कि टेबल सेल्स ने अब टेबल की पूरी चौड़ाई नहीं भरी थी।

— शेवी

जैसा कि दूसरों ने कहा है कि यह ठीक से काम नहीं करता है: तालिका पंक्तियाँ तालिका की चौड़ाई को नहीं भरती हैं।

— कोलिमार्को

@SergeStroobandt नहीं, मेरे मामले white-space: nowrap;में समस्या का समाधान नहीं है (फ़ायरफ़ॉक्स पर परीक्षण किया गया)। पंक्तियों का विस्तार करने के लिए पर्याप्त सामग्री (पाठ) नहीं होने पर पंक्तियों की चौड़ाई तालिका की चौड़ाई से कम है।

— कोलिमार्को

@collimarco नोट मुझे अधिकतम-चौड़ाई का उपयोग करना था: इनलाइन-ब्लॉक विकल्प के लिए 100%।

— dogoncouch

Answer 3

तालिका को DIV में लपेटें, निम्न शैली के साथ सेट करें:

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}

Comments

ऐसा लगता है कि overflow:autoयहाँ आवश्यक है। क्या आप जानते हैं कि इसे प्राप्त करने के लिए वैसे भी चौड़ाई निर्धारित किए बिना ... कि हमेशा html में समाधान लगता है - हार्डकोड कुछ चौड़ाई या ऊंचाई लेकिन लेआउट इंजन होने के बिंदु को हराने के लिए लगता है!

— जॉनीराया

Answer 4

इसके लिए सीएसएस विशेषता " अतिप्रवाह " का उपयोग करें।

संक्षिप्त सारांश:

overflow: visible|hidden|scroll|auto|initial|inherit;

जैसे

table {
    display: block;
    overflow: scroll;
}

Comments

प्रदान की गई लिंक टूटी हुई है

— justingordon

Answer 5

मेरे पास @Serge Stroobandt द्वारा प्रस्तावित समाधान के साथ अच्छी सफलता थी, लेकिन मुझे इस समस्या का सामना करना पड़ा @Shevy ने कोशिकाओं के साथ तब तालिका की पूरी चौड़ाई नहीं भरी थी। मैं कुछ शैलियों को जोड़कर इसे ठीक करने में सक्षम था tbody।

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table tbody {
  display: table;
  width: 100%;
}

यह मैक पर फ़ायरफ़ॉक्स, क्रोम और सफारी में मेरे लिए काम करता था।

Answer 6

मैं काम करने के लिए ऊपर दिए गए किसी भी समाधान को प्राप्त नहीं कर सका। हालाँकि, मुझे एक हैक मिला:

body {
  background-color: #ccc;
}

.container {
  width: 300px;
  background-color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.hack2 {
  display: table-cell;
  overflow-x: auto;
  width: 100%;
}

<div class="container">

  <div class="hack1">
    <div class="hack2">

      <table>
        <tr>
          <td>table or other arbitrary content</td>
          <td>that will cause your page to stretch</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
      </table>

    </div>
  </div>

</div>

Comments

उपरोक्त में से किसी ने भी मेरे लिए काम नहीं किया, लेकिन यह किया। अच्छा लगा, धन्यवाद।

— गबरील

@ गैब्रिएल ग्लैड यह आपके लिए काम करता है। मैंने इसे अभी फ़ायरफ़ॉक्स में फिर से आज़माया और यह सही ढंग से प्रस्तुत नहीं होता है :-( i.imgur.com/BcjSaCV.png क्रोम अभी भी अच्छा लग रहा है।

— एमपीएन

अजीब; मैं इसे फ़ायरफ़ॉक्स पर बिल्कुल उपयोग कर रहा था और इसने वहाँ काम किया - हालाँकि इस सटीक सेटअप में नहीं। मैं 10 x 10 px divs से बनी एक बड़ी ग्रिड को ढहने वाली सीमाओं के साथ प्रस्तुत करना चाहता था और अधिकतम-बाहर की चौड़ाई + अतिप्रवाह-x: ऑटो की कुंजी लग रही थी। जगह में उन लोगों के साथ, सब कुछ सही लग रहा था। इसके अलावा, मैं <table> का उपयोग नहीं कर रहा हूं, केवल divs, डिस्प्ले के साथ: टेबल, टेबल-पंक्ति और टेबल-सेल।

— गब्रिएल

Answer 7

यह सर्ज स्ट्रोबंड के जवाब में सुधार और पूरी तरह से काम करता है। यदि यह कम कॉलम है तो यह पूरे पृष्ठ की चौड़ाई को नहीं भरने वाली तालिका के मुद्दे को हल करता है।

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

<div class="table_wrapper">
<table>
...
</table>
</div>

Comments

white-space: nowrap;वैकल्पिक हो रहा है।

— माइक शियान

Answer 8

मैं उसी मुद्दे पर चल रहा था। मैंने निम्नलिखित समाधान की खोज की, जिसे केवल Chrome v31 में परीक्षण किया गया है:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

Comments

table-layout: fixedअच्छा है।

— सेस टिम्मरमैन

Answer 9

मैंने पिछले समाधान के आधार पर इस उत्तर का पता लगाया और यह टिप्पणी की और अपने स्वयं के कुछ समायोजन जोड़े। यह मेरे लिए उत्तरदायी तालिका पर काम करता है।

table {
  display: inline-block;
  overflow-x: auto;
  white-space: nowrap;
  // make fixed table width effected by overflow-x
  max-width: 100%;
  // hide all borders that make rows not filled with the table width
  border: 0;
}
// add missing borders
table td {
  border: 1px solid;
}

Comments

@Saeed क्या आप html संरचना की तरह कुछ मतलब है?

— जॉर्ज

मेरा बुरा, मेरा मतलब है कि इसे और बेहतर ढंग से समझने में मदद करने के लिए और अधिक स्पष्टीकरण जोड़ें

— मास्टिसा

आशा है कि यह संस्करण अधिक स्पष्ट है।

— जॉर्ज

Answer 10

मेज पर '100% से अधिक चौड़ाई' ने वास्तव में मेरे लिए काम किया।

.table-wrap {
    width: 100%;
    overflow: auto;
}

table {
    table-layout: fixed;
    width: 200%;
}

Answer 11

//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>

//Css to make Horizontal Dropdown

<style>

    .search-table{table-layout: auto; margin:40px auto 0px auto; }
    .search-table, td, th {
        border-collapse: collapse;
    }
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
    .search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }


</style>

Comments

यदि आप किसी चीज़ को डेमो करने का इरादा रखते हैं तो इंडेंटेशन और सैंपल डेटा मदद करेगा। इसके अलावा, क्या आपका मतलब "ड्रॉपडाउन" के बजाय "स्क्रॉलबार" था?

— सेस टिम्मरमैन