सवाल सीएसएस में सेलपैडिंग और सेलस्पेसिंग सेट करें?


एक HTML तालिका में, cellpadding तथा cellspacing इस तरह सेट किया जा सकता है:

<table cellspacing="1" cellpadding="1">

सीएसएस का उपयोग करके इसे कैसे पूरा किया जा सकता है?


2924
2017-12-04 08:45


मूल


बस एक सामान्य सुझाव, यह देखने के लिए जांचें कि क्या आपकी style.css इन समाधानों को आजमाने से पहले आपकी टेबल पर "रीसेट" करता है या नहीं। उदाहरण: यदि आपके पास टेबल सेट नहीं हैं width:auto फिर border-collapse उम्मीद के रूप में काम नहीं कर सकता है। - PJ Brunet
टीडी पर टेबल और पैडिंग पर सीमा-दूरी का प्रयोग करें। - Anubhav


जवाब:


मूल बातें

सीएसएस में "सेलपैडिंग" को नियंत्रित करने के लिए, आप बस उपयोग कर सकते हैं padding टेबल कोशिकाओं पर। जैसे "सेलपैडिंग" के 10 पीएक्स के लिए:

td { 
    padding: 10px;
}

"सेलस्पेसिंग" के लिए, आप आवेदन कर सकते हैं border-spacing आपकी मेज पर सीएसएस संपत्ति। जैसे "सेलस्पेसिंग" के 10 पीएक्स के लिए:

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

यह संपत्ति अलग क्षैतिज और ऊर्ध्वाधर दूरी को भी अनुमति देगी, कुछ ऐसा जो आप पुराने स्कूल "सेलस्पेसिंग" के साथ नहीं कर सके।

आईई में मुद्दे <= 7

यह इंटरनेट एक्सप्लोरर 7 के माध्यम से इंटरनेट एक्सप्लोरर को छोड़कर लगभग सभी लोकप्रिय ब्राउज़रों में काम करेगा, जहां आप लगभग भाग्य से बाहर हैं। मैं "लगभग" कहता हूं क्योंकि ये ब्राउज़र अभी भी समर्थन करते हैं border-collapse संपत्ति, जो आसन्न तालिका कोशिकाओं की सीमाओं को विलीन करती है। यदि आप सेलस्पेसिंग को खत्म करने की कोशिश कर रहे हैं (यानी, cellspacing="0") फिर border-collapse:collapse एक ही प्रभाव होना चाहिए: तालिका कोशिकाओं के बीच कोई जगह नहीं है। यह समर्थन छोटी है, हालांकि, क्योंकि यह मौजूदा को ओवरराइड नहीं करता है cellspacing तालिका तत्व पर एचटीएमएल विशेषता।

संक्षेप में: गैर-इंटरनेट एक्सप्लोरर 5-7 ब्राउज़र के लिए, border-spacing आपको संभाला इंटरनेट एक्सप्लोरर के लिए, यदि आपकी स्थिति ठीक है (आप 0 सेलस्पेसिंग चाहते हैं और आपकी तालिका पहले से ही परिभाषित नहीं है), तो आप इसका उपयोग कर सकते हैं border-collapse:collapse

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

नोट: सीएसएस गुणों के एक महान अवलोकन के लिए जो कोई टेबल पर लागू हो सकता है और किस ब्राउज़र के लिए, इसे देखें शानदार Quirksmode पेज


3227
2017-07-09 02:34



सेलपैडिंग = "0" क्रोम 13.0.782.215 में अभी भी एक अंतर डाल सकता है, भले ही सीमा-पतन हो: पतन और सीमा-दूरी तालिका पर लागू होती है। - Lee
@LeeWitney आपको अपनी टेबल कोशिकाओं पर पैडिंग सेट करने की आवश्यकता है: 0। - Martin Ørding-Thomsen
यह विषय से थोड़ी दूर है, लेकिन सेलपैडिंग और सेलस्पेसिंग विशेषताएं HTML5 में हटा दी गई हैं, इसलिए सीएसएस अब जाने का एकमात्र तरीका है। - Ignas2526
नमस्ते। मैंने स्पष्टता के लिए उत्तर अपडेट किया है, जिसमें सेलपैडिंग पर एक सेक्शन शामिल है, जिसे मैंने सोचा था कि स्पष्ट था (बस "पैडिंग" का उपयोग करें)। उम्मीद है कि यह अब और अधिक उपयोगी है। - Eric Nguyen
सच है, @vapcguy, असीम रूप से परिवर्तनीय अन्य स्थितियों में से किसी एक में आप एक टेबल स्टाइल कर सकते हैं, आपको अधिक विशिष्ट चयनकर्ताओं को परिभाषित करने की आवश्यकता होगी। उपरोक्त उदाहरण के रूप में चिह्नित हैं। - Eric Nguyen


चूक

ब्राउज़र का डिफ़ॉल्ट व्यवहार बराबर है:

table {border-collapse: collapse;}
td    {padding: 0px;}

enter image description here

Cellpadding

सेल और सेल दीवार की सामग्री के बीच की जगह सेट करता है

table {border-collapse: collapse;}
td    {padding: 6px;}

enter image description here

cellspacing

टेबल कोशिकाओं के बीच की जगह को नियंत्रित करता है

table {border-spacing: 2px;}
td    {padding: 0px;}

enter image description here

दोनों

table {border-spacing: 2px;}
td    {padding: 6px;}

enter image description here

दोनों (विशेष)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

enter image description here

ध्यान दें: अगर वहाँ है border-spacing सेट, यह इंगित करता है border-collapse तालिका की संपत्ति है separate

यह अपने आप का प्रयास करें!

यहाँ आप इसे प्राप्त करने का पुराना HTML तरीका पा सकते हैं।


851
2018-06-12 10:24



टेबल के आस-पास की दूरी कैसा चल रहा है? जब मैं "सीमा-दूरी: 8px 12px सेट करता हूं, तो यह केवल बीच के बीच नहीं, बल्कि तालिका सीमा और बाहरी कक्षों के बीच अंतर जोड़ता है! लेकिन यह छवियों में चित्रित नहीं है; वे बाएं हैं। - Kaz
@ 2astalavista और दुर्भाग्यवश अगर कोई बाहरी दूरी को हटाए जाने का प्रभाव चाहता है, तो यह इन सीएसएस विशेषताओं के साथ इस तरह से काम नहीं करेगा। - Kaz
@Kaz आपको उस परेशान हिस्से को छिपाने के लिए नकारात्मक मार्जिन का उपयोग करने की आवश्यकता हो सकती है।
टीडी पर डिफ़ॉल्ट पैडिंग आमतौर पर 1px है, 0 नहीं - Jan M


table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

313
2017-08-24 15:17



यह वास्तव में एकमात्र चीज है जिसे मैं अपने लिए काम कर सकता हूं, हालांकि मैंने सामान्य रूप से सामान्य होने से बचने के लिए एक आईडी को जानकारी लागू की है। - Kzqai
ऐसा इसलिए है cellspacing=0 बराबर। के बराबर cellspacing=1 पूरी तरह से अलग है। स्वीकृत उत्तर देखें। - TRiG
नहीं करना चाहिए table td तथा table th शांत रहो td तथा th क्रमशः? यह किसी भी तरह से काम करता है, लेकिन एक छोटे चयनकर्ता का मतलब थोड़ा तेज मिलान है - Cole Johnson
@Cole वास्तव में, मुझे लगता है कि यह होना चाहिए table > tr > td तथा table > tr > th। यह लगभग जितना तेज़ है tr तथा th, और अगर आपके पास नेस्टेड टेबल है तो यह काम करने की गारंटी है। बस मेरे 2 सी - aboveyou00
@ उपरोक्त00 लेकिन है table चयनकर्ता की आवश्यकता है? आईआईआरसी, ए <td> एक के अंदर जब तक अवैध है <tr>। - Cole Johnson


जहां तक ​​मुझे पता है, तालिका कक्षों पर मार्जिन सेट करना वास्तव में कोई प्रभाव नहीं पड़ता है। असली सीएसएस के बराबर है cellspacing है border-spacing - लेकिन यह इंटरनेट एक्सप्लोरर में काम नहीं करता है।

आप उपयोग कर सकते हैं border-collapse: collapse उल्लेखनीय रूप से सेल स्पेसिंग को 0 पर सेट करने के लिए, लेकिन किसी भी अन्य मूल्य के लिए मुझे लगता है कि एकमात्र क्रॉस-ब्राउज़र तरीका है जिसका उपयोग करना जारी रखना है cellspacing विशेषता।


104
2017-12-04 09:18



आज की उम्र में वास्तविकता एनएच डिग्री के लिए चूसने वाली है। - John K
यह लगभग सही है, लेकिन border-collapse यदि तालिका में पहले से कोई नहीं है तो केवल आईई 5-7 में काम करता है cellspacing विशेषता परिभाषित। मैंने एक व्यापक उत्तर लिखा है जो इस पृष्ठ पर अन्य उत्तरों के सभी सही हिस्सों को विलय करता है यदि यह सहायक है। - Eric Nguyen
ईमानदार होने के लिए, इंटरनेट एक्सप्लोरर की परवाह कौन करता है? जो भी इसका उपयोग करता है उसे पता होना चाहिए कि टूटी हुई वेबसाइटें हैं जो अपने गलती - ऐसे निम्न गुणवत्ता वाले ब्राउज़र का उपयोग करने के लिए। वेबसाइटों को इससे निपटना नहीं चाहिए। इंटरनेट एक्सप्लोरर खो जाने दें। इसके लिए समर्थन भूल जाओ। हमें इसकी आवश्यकता नहीं है, और इसके लिए विकास करना एक दर्द है। - Dev


यह हैक इंटरनेट एक्सप्लोरर 6 और बाद में काम करता है, गूगल क्रोमफ़ायरफ़ॉक्स, और ओपेरा:

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

* घोषणा इंटरनेट एक्सप्लोरर 6 और 7 के लिए है, और अन्य ब्राउज़र इसे ठीक से अनदेखा करेंगे।

expression('separate', cellSpacing = '10px') रिटर्न 'separate', लेकिन दोनों कथन चलाए जाते हैं, क्योंकि जावास्क्रिप्ट में आप अपेक्षा से अधिक तर्क पारित कर सकते हैं और उन सभी का मूल्यांकन किया जाएगा।


84
2017-12-05 04:30



उत्तरदायी ईमेल का प्रयास करने वालों के लिए, ध्यान दें कि * Outlook 2007+ द्वारा पहचाना नहीं गया है (रेंडर इंजन के रूप में शब्द का उपयोग करता है) campaignmonitor.com/css - ptim


उन लोगों के लिए जो गैर-शून्य सेलस्पेसिंग मान चाहते हैं, निम्न सीएसएस मेरे लिए काम करता है, लेकिन मैं केवल फ़ायरफ़ॉक्स में इसका परीक्षण करने में सक्षम हूं। देखें quirksmode संपर्क कहीं और पोस्ट किया गया संगतता विवरण के लिए। ऐसा लगता है कि यह पुराने इंटरनेट एक्सप्लोरर संस्करणों के साथ काम नहीं कर सकता है।

table {
    border-collapse: separate;
    border-spacing: 2px;
}

61
2017-08-20 03:32





इस समस्या का सरल समाधान है:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

44
2017-12-08 16:04





इसके अलावा, अगर आप चाहते हैं cellspacing="0"जोड़ने के लिए मत भूलना border-collapse: collapse आपके में tableस्टाइलशीट।


40
2017-12-04 09:06