2 सवाल: कॉलम की 'x' संख्या के बाद मैं HTML तालिका को कैसे विभाजित कर सकता हूं?

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

मैं कई स्तंभों के बाद आधे में विभाजित होने और स्टैक करने के लिए एक तालिका पंक्ति प्राप्त करने की कोशिश कर रहा हूं, लेकिन मैं इसे सीएसएस के साथ कैसे कर सकता हूं?

मैंने td: nth-child (12), और कई सीएसएस प्रयासों का उपयोग करके 12 वें कॉलम को लक्षित करने का प्रयास किया है।

td:nth-child(12) { white-space: nowrap; }
<table>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    </tr>
</table>

मुझे 12 वें कॉलम को लक्षित करने में सक्षम होने की उम्मीद है, फिर कॉलम को केवल सीएसएस के साथ 13-24 पंक्ति में रखें। या कम से कम 13-24 तो एक नई पंक्ति की तरह व्यवहार करते हैं।

    
2
  1. खैर, अधिक <tr>s का उपयोग करना बेहतर होगा, लेकिन आप table tr { display: grid; grid-template-columns: repeat(12, 1fr)}
    का भी उपयोग कर सकते हैं
    2019-05-08 14: 16: 37Z
  2. उत्तर देने के बाद मैं आपकी टिप्पणी दिखाता हूं, ख़ुशी है कि आप टिप्पणी अनुभाग में उत्तर देते हैं
    2019-05-08 14: 22: 04Z
  3. निश्चित रूप से यदि आपके टेबल कॉलम को उस तरह से लपेटने की आवश्यकता है, तो तालिका वास्तव में सारणीबद्ध डेटा प्रदर्शित नहीं कर रही है (क्योंकि यह कॉलम शीर्षक मिलान नहीं होने के कारण समझ में नहीं आएगा। अप) इसलिए आपको वास्तव में तालिकाओं का उपयोग नहीं करना चाहिए?
    2019-05-08 15: 55: 43Z
  4. @ elveti - पहली बार स्वीकार करने के लिए आपका धन्यवाद और आपकी मदद की सराहना:)
    2019-05-09 09: 17: 59Z
  5. @ पीट - यह एक गतिशील वातावरण में है और हम कोर HTML को नहीं छू सकते हैं, मेरे सिर पर इतनी धमाकेदार हैं कि एप्लाइसेंस src कोड तक पहुंच प्राप्त करने की कोशिश करें - बस कहा कि यह परियोजना के मालिक द्वारा मेरा प्रेषण नहीं है - ठीक है तो: (
    )
    2019-05-09 09: 20: 27Z
    2 उत्तर                              2                         

    आप बस फ्लेक्स-बॉक्स का उपयोग कर सकते हैं।

    tr {
        display: flex;
        flex-wrap: wrap;
    }
    
    td {
        flex: calc(100% / 13);
    }
    

    यह और भी कॉलम /tds के साथ काम करेगा। मैंने आपके लिए बस एक कोड-पेन बनाया है:)

    https://codepen.io/anon/pen/yWYzdr

        
    2
    2019-05-08 15: 02: 50Z
    1. धन्यवाद @Kani, इसने अद्भुत काम किया!
      2019-05-09 09: 13: 40Z

      आप ऐसा कर सकते हैं, CSS grid

      का उपयोग कर

      table tr {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
      }
      <table>
          <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td>11</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td>18</td>
          <td>19</td>
          <td>20</td>
          <td>21</td>
          <td>22</td>
          <td>23</td>
          <td>24</td>
          <td>25</td>
          </tr>
      </table>
          
      4
      2019-05-08 14: 20: 37Z
      1. इसने मेरे लिए भी काम किया @Nisharg, इच्छा स्टैकओवरफ़्लो मुझे 2 स्वीकृत एवियर्स की अनुमति देगा:)
        2019-05-09 09: 12: 16Z
      2. उपरोक्त उत्तर में कुछ गड़बड़ है क्योंकि इसका सब्सट्रेट मान 100% से है और परिणाम बिंदु में है तो मेरे जवाब से यह स्वीकार्य उत्तर नहीं है, लेकिन आपको पसंद है मेरा जवाब भी, धन्यवाद !!
        2019-05-09 09: 27: 22Z
स्रोत रखा गया यहाँ