मैं केवल एक तालिका के अंदर सीमा कैसे लागू कर सकता हूं?

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि टेबल के अंदर केवल बॉर्डर को कैसे जोड़ा जाए। जब मैं करता हूं:

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

बॉर्डर पूरे टेबल के आसपास है और टेबल सेल्स के बीच भी है। मैं जो हासिल करना चाहता हूं, वह टेबल सेल्स के चारों ओर की टेबल के अंदर (बाहरी बॉर्डर टेबल के बिना) है।

यहाँ मार्कअप है जो मैं तालिकाओं के लिए उपयोग कर रहा हूँ (भले ही मुझे लगता है कि यह महत्वपूर्ण नहीं है):

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

और यहाँ कुछ मूल शैलियाँ हैं जिन्हें मैं अपनी अधिकांश सारणियों पर लागू करता हूँ:

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

Comments

मुझे कोशिकाओं के चारों ओर केवल सीमाएँ दिखाई देती हैं। चूंकि प्रत्येक कोशिका में एक सीमा होती है, इसलिए ऐसा प्रतीत होता है कि तालिका में एक सीमा है। शायद मुझे सवाल नहीं आता?

— चेतन एस

जिसे आंतरिक सीमा भी कहा जाता है ।

— मैकेनिकल घोंघा

Answer 1

यदि आप वह कर रहे हैं जो मैं मानता हूं कि आप करने की कोशिश कर रहे हैं, तो आपको कुछ इस तरह की आवश्यकता होगी:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle डेमो

समस्या यह है कि आप सभी कक्षों के चारों ओर एक 'पूर्ण सीमा' स्थापित कर रहे हैं, जो ऐसा प्रतीत होता है जैसे कि आपके पास संपूर्ण तालिका के चारों ओर एक सीमा है।

चीयर्स।

संपादित करें: उन छद्म वर्गों पर एक और अधिक जानकारी quirksmode पर पाई जा सकती है , और, जैसा कि उम्मीद की जा रही है, आप IE समर्थन के संदर्भ में बहुत ज्यादा एसओएल हैं।

Comments

इस तरह की सरल तालिकाओं के साथ, एक बहुत छोटा समाधान है जो अगले सिबलिंग कॉम्बिनेटर का उपयोग करके छद्म वर्गों का उपयोग करने से बचता है। मेरा जवाब देखिए।

— dalgard

@ यह 5 साल पहले उत्तर दिया जा रहा है, क्या कोई 'नया' / 'अधिक कुशल' तरीका है जो यह है?

— jbutler483

यदि आप कभी भी किसी तालिका में पहले स्तंभ पर रोस्पैन का उपयोग नहीं करते हैं तो यह काम नहीं करता है।

— जैक

Answer 2

यह मेरे लिए काम करता है:

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

उदाहरण देखें ...

एफएफ 3.6 और क्रोमियम 5.0 में परीक्षण किया गया, IE में समर्थन का अभाव है; से W3C :

'छिपी' की 'बॉर्डर-स्टाइल' की सीमाएँ अन्य सभी परस्पर विरोधी सीमाओं पर पूर्ववर्ती हैं। इस मान के साथ कोई भी सीमा इस स्थान पर सभी सीमाओं को दबा देती है।

Comments

जब तक आपको टेबल बॉर्डर की जरूरत नहीं है, यह निश्चित रूप से सबसे सुरुचिपूर्ण समाधान है।

— cjroth

Answer 3

वांछित प्रभाव को प्राप्त करने के लिए एक बहुत ही सरल तरीके का उदाहरण :

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>

Comments

"जादू" समझाया, frame और rulesकर रहे हैं पुराने (नहीं एचटीएमएल 5) table जिम्मेदार बताते हैं (आप सीएसएस के बजाय का उपयोग करना चाहिए)। frameकहते हैं कि बाहर की तालिका सीमाओं के कौन से हिस्से दिखाई देने चाहिए - voidइसका मतलब है कि सभी बाहरी सीमाओं को छिपाएं ... rulesकहते हैं कि अंदर की तालिका सीमाओं के कौन से हिस्से दिखाई देने चाहिए - allइसका मतलब है कि सभी ... जाहिर है ... कृपया इसका उपयोग न करें, जब तक कि आप HTML3 कट्टरपंथी हैं ... :)

— jave.web

बॉर्डर जैसी किसी चीज़ को जोड़ना: 1px सॉलिड ब्लैक यह सुनिश्चित करेगा कि टेबल के बाहरी हिस्से को बॉर्डर मिले।

— हारून लियू

2020 में एक आकर्षण की तरह काम किया गया था कि मैं जिस वेबसाइट को पढ़ रहा था उसमें एक हास्यास्पद जगह पर जल्दी से कुछ पठनीयता जोड़ सकता हूं। वास्तव में, बस आंतरिक सीमाओं के लिए यह पर्याप्त था: नियम = "सभी"

— एडोआर्डो फेंचिनेली

Answer 4

Ie7 के साथ मंटेन कम्पैटिबिलिटी के कारण, I8 मैं यह करने के लिए पहले-बच्चे और अंतिम-बच्चे का उपयोग करने का सुझाव देता हूं:

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

आप सीएसएस 2.1 छद्म कक्षाओं के बारे में जान सकते हैं: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

Comments

यह एक बेहतरीन उपाय है। लेकिन सावधान रहें, अगर आपके पास अपने टेबल सेल में से एक में एक और टेबल है और आप अपनी "इनर" टेबल के लिए सीएसएस लाइनों के एक और सेट की जरूरत के भीतर की सीमाओं को देखना चाहते हैं

— माइकल बर्मन

Answer 5

साधारण तालिका मार्कअप के लिए, यहाँ एक संक्षिप्त समाधान है जो IE 7 और उससे नीचे के सिवाय BrowserStack पर सभी उपकरणों / ब्राउज़रों पर काम करता है:

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

IE 7 समर्थन के लिए, इसे जोड़ें:

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

एक परीक्षण मामला यहाँ देखा जा सकता है: http://codepen.io/dalgard/pen/wmcdE

Comments

महान - के रूप में यह भी एक मेज पर एक अलग सीमा सेट करने के लिए अनुमति देता है, यह प्रदर्शित नहीं की तुलना में रोटर।

— jsbueno

Answer 6

यह काम करना चाहिए:

table {
 border:0;
}

table td, table th {
    border: 1px solid black;
    border-collapse: collapse;
}

---

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

मैंने अभी इसकी कोशिश की, कोई टेबल बॉर्डर नहीं। लेकिन अगर मैं एक टेबल सीमा निर्धारित करता हूं तो इसे सीमा-पतन द्वारा समाप्त कर दिया जाता है।

यह परीक्षण है:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>

Comments

नहीं है कि काम नहीं किया है मैंने कोशिश की है कि। मैं अपनी पहली पोस्ट संपादित करूंगा।

— रिचर्ड नोप

Answer 7

कि यह सब बिना सीएसएस के करेगा <TABLE BORDER=1 RULES=ALL FRAME=VOID>

से कोड: HTML कोड ट्यूटोरियल

Answer 8

इसके साथ प्रत्येक सेल में बॉर्डर जोड़ें:

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

पहली पंक्ति में सभी कक्षों से शीर्ष सीमा निकालें:

table > tbody > tr:first-child > td { border-top: 0; }

पहले स्तंभ में कक्षों से बाईं सीमा निकालें:

table > tbody > tr > td:first-child { border-left: 0; }

अंतिम कॉलम में कक्षों से दाईं सीमा निकालें:

table > tbody > tr > td:last-child { border-right: 0; }

अंतिम पंक्ति में कक्षों से निचला बॉर्डर निकालें:

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

Answer 9

Tbody / thead / tfoot और td / th के किसी भी संयोजन के लिए काम करता है

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

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}

<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>