HTML तालिका पंक्ति में एक सीमा देते हुए, <tr>

Question

यह एक तालिका पंक्ति सीमा के लिए, संभव है <tr>एक के बजाय व्यक्तिगत कोशिकाओं के लिए एक सीमा दे रही है, की जाने में <td>की तरह,

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

यह दिए गए चारों ओर एक सीमा देता है <tr>लेकिन इसके लिए अलग-अलग कक्षों के चारों ओर एक सीमा की आवश्यकता होती है।

क्या हम <tr>केवल एक बार में सीमा दे सकते हैं?

→ jsFiddle

Answer 1

आप borderएक trतत्व पर गुण सेट कर सकते हैं , लेकिन CSS 2.1 विनिर्देश के अनुसार, अलग-अलग सीमाओं के मॉडल में ऐसे गुणों का कोई प्रभाव नहीं होता है, जो ब्राउज़रों में डिफ़ॉल्ट हो जाता है। रेफरी .: 17.6.1 अलग बॉर्डर्स मॉडल । ( प्रारंभिक का मूल्य border-collapseहै separateसीएसएस 2.1 के अनुसार, और कुछ ब्राउज़र भी रूप में सेट डिफ़ॉल्ट मान के लिए table। शुद्ध प्रभाव वैसे भी है कि आप लगभग सभी ब्राउज़रों जब तक आप स्पष्ट specifi पर सीमा अलग हो है collapse।)

इस प्रकार, आपको ढहने वाली सीमाओं का उपयोग करने की आवश्यकता है। उदाहरण:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

Comments

@ रोबर्ट सीमर हालांकि यह सच है कि यह पंक्तियों के चारों ओर एक सीमा रखता है, इसके लिए "सीमा-पतन: पतन" की भी आवश्यकता होती है। इस तरीके से सेलपैडिंग प्रॉपर्टी का उपयोग करके कॉलम को स्थान नहीं दिया जा सकता है। नीचे दिए गए csmckelvey के उत्तर में प्रयुक्त रूपरेखा संपत्ति तालिका के लुक पर अधिक नियंत्रण प्रदान करती है और ठीक उसी लक्ष्य को प्राप्त करती है। यह स्वीकृत उत्तर नहीं होना चाहिए क्योंकि यह लक्ष्य को प्राप्त करने के लिए अनावश्यक रूप से कार्यक्षमता को सीमित करता है।

— me_

Answer 2

पूर्ण रूप से! महज प्रयोग करें

<tr style="outline: thin solid">

जिस पर कभी भी आपको अच्छा लगता है। यहाँ एक बेला है ।

बेशक, जैसा कि लोगों ने उल्लेख किया है, आप चाहें तो एक आईडी, या कक्षा या किसी अन्य माध्यम से कर सकते हैं।

Comments

<tr> कंटेनर होना चाहिए ऐसा तत्व नहीं है जो उसके बच्चे को उसकी शैली के माध्यम से स्वरूपित करता है, शब्दार्थ के संदर्भ में सही नहीं है, भले ही वह काम करता हो।

— इतय गाल

गूगल क्रोम और इंटरनेट एक्सप्लोरर एक सीमा के आसपास दिखाते हैं, <tr>लेकिन मोज़िला फायर फॉक्स सीमा प्रदर्शित नहीं करता है।

— छोटे

के outlineबजाय का उपयोग करने का प्रयास करें border। कि अनुकूलता को ठीक करना चाहिए। मेरे पास केवल Chrome atm है, इसलिए मैं इसका परीक्षण नहीं कर सकता।

— टेकेंड्रार्क

रूपरेखा सीमा नहीं है।

— जुक्का के। कोर्पेला

बिल्कुल समझ में आता है। यह साइट लोगों को सर्वश्रेष्ठ उत्तर देने के बारे में है, न कि मेरे प्रतिनिधि :)

— takendarkk

Answer 3

हाँ। मैंने अपना उत्तर DEMO अपडेट किया

table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

table td:first-child {
     border-left: thin solid;
}

table td:last-child {
     border-right: thin solid;
}

यदि आप केवल एक शैली करना चाहते हैं, तो आप <tr>इसे एक वर्ग के साथ कर सकते हैं: दूसरा डेमो

Comments

यह इंटरनेट एक्सप्लोरर नापसंद last-child(यह समर्थन नहीं लगता है) जैसा दिखता है ।

— टिनी

@ क्या आप किस IE संस्करण का समर्थन करना चाहते हैं? संस्करण 9+ पहले-बच्चे और अंतिम-बच्चे का समर्थन करता है।

— इतय गल गन

यह इंटरनेट एक्सप्लोरर 8 है, लेकिन इसके बारे में कोई चिंता नहीं है :)

— छोटे

आप <tr> स्टाइल नहीं कर रहे हैं, आप <td> स्टाइल कर रहे हैं।

— बजे रॉबर्ट सिएमर

Answer 4

CSS कक्षाओं का उपयोग करें:

tr.border{
    outline: thin solid;
}

और इसका उपयोग करें:

<tr class="border">...</tr>

Answer 5

आप एक बॉर्डर पर उप-तत्व के रूप में एक बॉक्स तत्व पर बॉक्स-शैडो प्रॉपर्टी का उपयोग कर सकते हैं। प्लस के रूप में, एक ही तत्व पर किसी भी सीमा-त्रिज्या संपत्ति भी बॉक्स छाया पर लागू होगी।

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);

Comments

यह स्टाइल की तुलना में अधिक नियंत्रण प्रदान outlineकरता है। एक उच्चतर उत्तर होना चाहिए।

— जैकब स्टैम

Answer 6

वाम सेल:

style="border-style:solid;border-width: 1px 0px 1px 1px;"

मिड सेल (s):

style="border-style:solid;border-width: 1px 0px 1px 0px;"

सही सेल:

style="border-style:solid;border-width: 1px 1px 1px 0px;"

Answer 7

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Comments

क्या आप अपने उत्तर में टिप्पणी जोड़ सकते हैं और बता सकते हैं कि आपने क्या बदला?

— फ्रांसिस

Answer 8

सीमा-रिक्ति जोड़ना: 0rem 0.5rem; कोशिकाओं के बीच कोई स्थान नहीं छोड़ते हुए अपने तल पर प्रत्येक कोशिका (td, th) वस्तुओं के लिए एक स्थान बनाता है

    table.app-table{
        border-collapse: separate;
        border-spacing: 0rem 0.5rem;
    }
    table.app-table thead tr.border-row the,
    table.app-table tbody tr.border-row td,
    table.app-table tbody tr.border-row th{
        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    table.app-table thead tr.border-row th:first-child,
    table.app-table tbody tr.border-row td:first-child{
        border-left: 1px solid #EAEAEA;
    }

    table.app-table thead tr.border-row th:last-child,
    table.app-table tbody tr.border-row td:last-child{
        border-right: 1px solid #EAEAEA;
    }

Answer 9

लंबे समय तक इससे लड़ने के बाद, मैंने निष्कर्ष निकाला है कि शानदार सरल उत्तर सिर्फ तालिका को खाली कोशिकाओं के साथ भरना है ताकि तालिका की प्रत्येक पंक्ति को समान संख्या में कोशिकाओं (संख्या को ध्यान में रखते हुए, स्पष्ट रूप से) में ले जाया जा सके। कंप्यूटर-जनरेट किए गए HTML के साथ यह व्यवस्थित करने के लिए बहुत सरल है, और जटिल वर्कअराउंड से लड़ने से बचता है। चित्रण निम्नानुसार है:

<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>


<h3>Simple solution, artificially insert empty cells</h3>

<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only<td><td>
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only<td>
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>