तालिका पंक्ति <tr> में बॉर्डर-बॉटम जोड़ें

Question

मेरे पास 3 से 3 की एक तालिका है। मुझे हर पंक्ति के निचले भाग के लिए एक सीमा जोड़ने का एक तरीका चाहिए trऔर इसे एक विशिष्ट रंग देना चाहिए।

पहले मैंने सीधा रास्ता आज़माया, यानी:

<tr style="border-bottom:1pt solid black;">

लेकिन वह काम नहीं किया। तो मैंने सीएसएस को इस तरह जोड़ा:

tr {
border-bottom: 1pt solid black;
}

वह अभी भी काम नहीं किया।

मैं CSS का उपयोग करना पसंद करूंगा क्योंकि तब मुझे styleहर पंक्ति में एक विशेषता जोड़ने की आवश्यकता नहीं है । मैंने इसमें कोई borderविशेषता नहीं जोड़ी है <table>। मुझे उम्मीद है कि यह मेरे सीएसएस को प्रभावित नहीं कर रहा है।

Comments

एक साइड नोट के रूप में, यदि इनलाइन स्टाइलिंग (आपके प्रश्न में पहला उदाहरण) काम नहीं कर रहा है, तो यह संभावना नहीं है कि एम्बेडेड स्टाइल (दूसरा उदाहरण) काम करेगा। आपको उस तत्व के लिए विशेषताओं की उपलब्धता पर भी शोध करना चाहिए जिसे आप शैली के लिए प्रयास कर रहे हैं: w3.org/TR/html-markup/tr.html

— Tass

यदि आप टेबल की

— ट्रे के

भविष्य के खोजकर्ताओं को @Nathan Manousos के उत्तर को नीचे स्क्रॉल करने के लिए प्रोत्साहित करने के लिए बस एक नोट, नीचे - यह शायद वह समाधान है जिसकी आप तलाश कर रहे हैं

— henry

Answer 1

मुझे पहले भी इस तरह की समस्या थी। मुझे नहीं लगता कि trसीधे बॉर्डर स्टाइल कर सकते हैं। मेरा काम tdपंक्ति में s शैली करना था :

<tr class="border_bottom">

सीएसएस:

tr.border_bottom td {
  border-bottom:1pt solid black;
}

Comments

ध्यान दें कि इस समाधान का उपयोग करने से आपको td के बीच की सीमा में अंतराल की संभावना होगी। simoncereska का जवाब इस बात का ध्यान रखता है लेकिन ध्यान रखें कि यह बिंदीदार या धराशायी बॉर्डर प्रकारों के साथ अच्छा नहीं लग सकता (क्योंकि वे निरंतर नहीं हैं)

— ग्रिडो

आप इसे cellspacing="0"एक विशेषता के रूप में जोड़कर भी इस उपाय को <table>देख सकते हैं ( इस प्रश्न को देखें )। हालांकि, यह पता नहीं है कि यह बिंदीदार या धराशायी सीमाओं के साथ कैसा दिखेगा।

— स्टीफन वैन डेन अककर

trढहते सीमा मॉडल में सीमा स्टाइल ले सकते हैं। @ संतराम, एक जवाब को स्वीकार करने पर विचार करें जो इस एक के बजाय उस पर ध्यान देता है, नहीं?

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

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

— टिमोथी गोंजालेज

और आपकी तालिका को इस शैली की आवश्यकता है <टेबल शैली = "सीमा-ढहना: पतन">

— ओगुज़

Answer 2

border-collapse:collapseअपनी तालिका नियम में जोड़ें :

table { 
    border-collapse: collapse; 
}

संपर्क

Comments

यह अपने आप से काम नहीं करता है। आप अभी भी पंक्ति को स्टाइल नहीं कर सकते, लेकिन आप कोशिकाओं को स्टाइल कर सकते हैं।

— रेनन मार्क

आप गलत हैं, @ रेनन। ढहने वाला सीमा मॉडल बिल्कुल वही है जो पंक्ति सीमाओं को शैलीगत बनाता है। CSS sectoin 17.6 के अनुसार : अलग-अलग बॉर्डर मॉडल में "Rows, [...] में बॉर्डर नहीं हो सकते हैं (यानी, उपयोगकर्ता एजेंटों को उन तत्वों के लिए बॉर्डर प्रॉपर्टीज को नजरअंदाज करना चाहिए)"। "ढहने वाले सीमा मॉडल में, बॉर्डर को निर्दिष्ट करना संभव है जो किसी कक्ष, पंक्ति [और] पंक्ति समूह [...] के सभी या भाग को घेरता है [...] और यह मेरे ब्राउज़र में काम करता है (क्रोमियम 37)।

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

मुझे लगता है कि कुछ लोग भ्रमित हो सकते हैं (जैसे मैंने किया) और यह नहीं देख रहे हैं कि सीमा-पतन की शैली को पंक्ति पर नहीं, मेज पर सेट करने की आवश्यकता है।

— पोर्यून

लगता है कि क्रोम में यह सुविधा नहीं है, हालांकि यह दूसरों को सीमा-पतन सुविधाओं का समर्थन करता है।

— लिकुन सन

Answer 3

border-collapse:collapseमेज border-bottom: 1pt solid black;पर और ट्रे पर उपयोग करें

Comments

सीमा के ढहने के साथ ही ट्रे पर बॉर्डर लगाना बेकार है। आपको इसे tr के रास पर सेट करना होगा

— Radu Simionescu

@RaduSimionescu गलत, trसीमा के ढहने पर यह पूरी तरह से ठीक काम करता है ।

— स्टाइलन

FF 45.0.1 में कोई प्रभाव नहीं।

— ट्रेक करें

Answer 4

उपयोग

border-collapse:collapse जैसा कि नाथन ने लिखा है और आपको सेट करने की आवश्यकता है

td { border-bottom: 1px solid #000; }

Comments

जिस तरह से मैं यह भी करना होगा! Td पर बॉर्डर जोड़ें और टेबल पर बॉर्डर-पतन का उपयोग करें

— Sayan

Answer 5

यहाँ बहुत से अधूरे उत्तर हैं। चूंकि आप trटैग करने के लिए सीमा लागू नहीं कर सकते हैं , इसलिए आपको इसे tdया thटैग पर लागू करने की आवश्यकता है :

td {
  border-bottom: 1pt solid black;
}

ऐसा करने से प्रत्येक के बीच एक छोटी सी जगह छूट जाएगी td, जो कि वांछनीय नहीं है यदि आप चाहते हैं कि सीमा दिखाई दे जैसे कि यह trटैग है। बोलने के लिए "अंतराल में भरने" के लिए, आपको तत्व border-collapseपर संपत्ति का उपयोग करने tableऔर इसके मूल्य को सेट करने की आवश्यकता है collapse, जैसे:

table {
  border-collapse: collapse;
}

Answer 6

उपयोग

table{border-collapse:collapse}
tr{border-top:thin solid}

सीएसएस गुणों के साथ "पतली ठोस" बदलें।

Answer 7

पंक्ति को ब्लॉक के रूप में प्रदर्शित करें।

tr {
    display: block;
    border-bottom: 1px solid #000;
}

और बस वैकल्पिक रंग प्रदर्शित करने के लिए:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Comments

नहीं एक अच्छा विचार सेट करने के लिएdisplay: blockके लिएtrकी। इसके बजायtr td { border-bottom: ... }विज्ञापन काउपयोग करेंtr.oddrow td { border-bottom: ... }

— vladr

डिस्प्ले ब्लॉक टेबल लेआउट को नष्ट कर सकता है। बॉर्डर-पतन: टेबल पर पतन स्वयं निश्चित रूप से सबसे अच्छा समाधान है

— N4ppeL

Answer 8

आप box-shadowकिसी trतत्व की सीमा को नकली करने के लिए संपत्ति का उपयोग कर सकते हैं । box-shadowमोटाई को समायोजित करने के लिए (नीचे 2px के रूप में प्रतिनिधित्व) की वाई स्थिति समायोजित करें।

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Answer 9

मैंने जोड़ने की कोशिश की

    table {
      border-collapse: collapse;
    }   

साथ में

    tr {
      bottom-border: 2pt solid #color;
    }

और फिर सीमा-पतन पर टिप्पणी की कि क्या काम किया है। बस नीचे की सीमा संपत्ति के साथ tr चयनकर्ता होने मेरे लिए काम किया!

कोई सीमा सीएसएस पूर्व।

नो बॉर्डर फोटो लाइव

सीएसएस सीमा पूर्व।

बॉर्डर फोटो के साथ टेबल लाइव

Answer 10

मैंने इस पद्धति का उपयोग करते समय पाया कि td तत्वों के बीच का स्थान सीमा में बनने के लिए एक खाई है, लेकिन कोई डर नहीं है ...

इसके आसपास एक तरीका:

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

सीएसएस के साथ:

td.end{
    border:2px solid black;
}

Answer 11

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

आप पूरी पंक्ति के साथ भी ऐसा ही कर सकते हैं।

नहीं है border-bottom-style, border-top-style, border-left-style, border-right-style। या बस border-styleएक ही बार में सभी चार सीमाओं पर लागू होते हैं।

आप देख सकते हैं (और अपने आप कोशिश करें ऑनलाइन) अधिक जानकारी के लिए यहाँ

Answer 12

कई दिलचस्प जवाब। चूंकि आप बस एक सीमा से नीचे (या ऊपर) चाहते हैं, इसलिए यहां दो और हैं। मान लें कि आप नीले रंग की बॉर्डर 3px मोटी चाहते हैं। शैली अनुभाग में आप जोड़ सकते हैं

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

या तो टेबल कोड में

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

Answer 13

इसका एक और समाधान border-spacingसंपत्ति है:

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

Answer 14

सीएसएस सीमा के नीचे नहीं:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

Answer 15

आप एक त्रि तत्व पर सीमा नहीं लगा सकते। यह मेरे लिए फ़ायरफ़ॉक्स और IE 11 में काम करता है:

<td style='border-bottom:1pt solid black'>

Comments

आप एक ट्रे पर एक सीमा नहीं लगा सकते। इसे स्पष्ट करने के लिए संपादित उत्तर।

— डेको

यह सबसे सरल और सटीक उत्तर है।

— जेम्स डेसी

Answer 16

एचटीएमएल

<tr class="bottom-border">
</tr>

सीएसएस

tr.bottom-border {
  border-bottom: 1px solid #222;
}

Comments

सीमा-पतन के बिना बेकार: पतन;

— m1crdy