किसी तालिका में विशिष्ट पंक्तियों के आसपास की सीमा?

120

मैं कुछ HTML / CSS डिज़ाइन करने का प्रयास कर रहा हूं जो एक तालिका में विशिष्ट पंक्तियों के चारों ओर एक सीमा रख सकते हैं। हां, मुझे पता है कि मैं वास्तव में लेआउट के लिए तालिकाओं का उपयोग करने वाला नहीं हूं, लेकिन मैं अभी तक इसे पूरी तरह से बदलने के लिए पर्याप्त सीएसएस नहीं जानता।

वैसे भी, मेरे पास एक मेज है जिसमें कई पंक्तियाँ और कॉलम हैं, कुछ पंक्तिबद्ध और कोलस्पैन के साथ विलय किए गए हैं, और मैं तालिका के कुछ हिस्सों के चारों ओर एक साधारण सीमा रखना चाहूंगा। वर्तमान में, मैं 4 अलग सीएसएस वर्गों (ऊपर, नीचे, बाएं, दाएं) का उपयोग कर रहा हूं जो मैं <td>क्रमशः उन कोशिकाओं के साथ संलग्न करता हूं जो तालिका के शीर्ष, नीचे, बाएं और दाईं ओर हैं।

.top {
  border-top: thin solid;
  border-color: black;
}

.bottom {
  border-bottom: thin solid;
  border-color: black;
}

.left {
  border-left: thin solid;
  border-color: black;
}

.right {
  border-right: thin solid;
  border-color: black;
}
<html>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr>
      <td class="top left">one</td>
      <td class="top right">two</td>
    </tr>
    <tr>
      <td class="bottom left">three</td>
      <td class="bottom right">four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr>
      <td class="top bottom left right" colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</html>
स्निपेट का विस्तार करें

क्या कोई आसान तरीका है जो मुझे चाहिए? मैंने ऊपर और नीचे आवेदन करने की कोशिश की, <tr>लेकिन यह काम नहीं किया। (पीएस मैं सीएसएस के लिए नया हूं, इसलिए शायद यह वास्तव में बुनियादी समाधान है जो मैंने याद किया है।)

नोट: मुझे कई बॉर्डर वाले खंडों की आवश्यकता है। मूल विचार प्रत्येक के लिए कई पंक्तियों वाले कई बॉर्डर वाले क्लस्टर हैं।

html  css  border  css-tables 
— काइल क्रोनिन
स्रोत
9
ऑफ-टॉपिक लेकिन मैं सिर्फ इतना कहना चाहता था कि
— टेबुल

जवाबों:

114

कैसे के बारे में tr {outline: thin solid black;}? Tr या tbody तत्वों पर मेरे लिए काम करता है, और IE 8+ सहित अधिकांश ब्राउज़रों के साथ संगत प्रतीत होता है, लेकिन इससे पहले नहीं।

— enigment
स्रोत
मैं एक तालिका में कई पंक्तियों के चारों ओर एक ही सीमा लगाने के बारे में पूछ रहा था, अनिवार्य रूप से इसे कई वर्गों में विभाजित कर रहा था लेकिन एक ही तालिका के भीतर विभिन्न वर्गों से सामान संरेखित करेगा।
— काइल क्रोनिन
3
समझ गया, मुझे वह भी चाहिए था। उन पंक्तियों के सेट को संलग्न करें जिन्हें आप अपने स्वयं के tbody में एक बॉर्डर चाहते हैं, और उपरोक्त css उनके सेट के चारों ओर एक बॉर्डर बनाएगा - यानी शीर्ष पंक्ति पर एक शीर्ष बॉर्डर, नीचे की पंक्ति में एक बार्डर बॉर्डर, और बाईं ओर और tbody में सभी पंक्तियों पर सही सीमाएँ। सीमाएं वास्तव में "उन पंक्तियों" पर नहीं हैं, वे स्वयं को प्रभावित करने की कोशिश कर रहे हैं।
— एनगमेंट
ओह, मैं देख रहा हूँ, कई tbodys - यह काम करता है, और कुछ ऐसा है जिसे मैंने नहीं माना था। अपवित्र :)
— काइल क्रोनिन
मेरा सुझाव होगा कि जब तक आपके पास वास्तव में कुछ बहुत गतिशील डेटा न हो तब तक tbodys को परिभाषित करने के बजाय nth-child () css प्रॉपर्टी का उपयोग करें। Nth-child (), nth-last-child (), and not () का उपयोग करके, आप अपनी इच्छानुसार किसी भी पंक्तियों / कक्षों का चयन कर सकते हैं (जब तक आप तालिका में चीजों के सापेक्ष अनुक्रमों को जानते हैं)। उदाहरण के लिए, आप tr के साथ शीर्ष दो और नीचे वाले को छोड़कर सभी पंक्तियों का चयन कर सकते हैं: नहीं (: nth-child (-n + 2)): नहीं (: nth-last-child (1))
— BT
1
ध्यान दें कि किसी तत्व के विशिष्ट पक्षों को सीमाबद्ध करने की संभावना नहीं है। उदाहरण के लिए "आउटलाइन-टॉप" नहीं है। यह एक सीमित समाधान है
— BT
53

जवाब दिया है कि सभी को धन्यवाद! मैंने यहां प्रस्तुत सभी समाधानों की कोशिश की है और मैंने अन्य संभावित समाधानों के लिए इंटरनेट पर अधिक खोज की है, और मुझे लगता है कि मैंने पाया है कि यह एक आशाजनक है:

tr.top td {
  border-top: thin solid black;
}

tr.bottom td {
  border-bottom: thin solid black;
}

tr.row td:first-child {
  border-left: thin solid black;
}

tr.row td:last-child {
  border-right: thin solid black;
}
<html>

<head>
</head>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr class="top row">
      <td>one</td>
      <td>two</td>
    </tr>
    <tr class="bottom row">
      <td>three</td>
      <td>four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr class="top bottom row">
      <td colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</body>

</html>
स्निपेट का विस्तार करें

आउटपुट:

यहाँ छवि विवरण दर्ज करें

इसके बजाय जोड़ने के लिए होने का top, bottom, left, और rightहर के लिए कक्षाएं <td>, सभी मैं क्या करना है जोड़ने के लिए top rowशीर्ष करने के लिए <tr>, bottom rowनीचे करने के लिए <tr>, और rowहर के लिए <tr>के बीच में। क्या इस समाधान में कुछ गलत है? क्या कोई क्रॉस-प्लेटफ़ॉर्म समस्याएं हैं जिनके बारे में मुझे पता होना चाहिए?

— काइल क्रोनिन
स्रोत
बस ब्राउज़रों के माध्यम से एक परीक्षण चलाया गया और ऐसा लग रहा है कि IE (सभी संस्करण) पहले-बच्चे और अंतिम-बाल विशेषताओं को पसंद नहीं करता है। : - /
— काइल क्रोनिन
1
(!) आईई 7 और 8 समर्थन पहले बच्चे, लेकिन कोई भी समर्थन अंतिम बच्चे की तरह लग रहा msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
— mechanical_meat
cellspacingविशेषता एचटीएमएल 5 में मान्य नहीं है। CSS table { border-collapse: collapse; border-spacing: 0; }जैसा लगता है अब जाने का रास्ता है।
— स्टेफन वैन डेन अककर
36

यदि आप border-collapseशैली को collapseपैरेंट टेबल पर सेट करते हैं तो आपको स्टाइल करने में सक्षम होना चाहिए tr: (स्टाइल डेमो के लिए इनलाइन हैं)

<table style="border-collapse: collapse;">
  <tr>
    <td>No Border</td>
  </tr>
  <tr style="border:2px solid #f00;">
    <td>Border</td>
  </tr>
  <tr>
    <td>No Border</td>
  </tr>
</table>

आउटपुट:

HTML आउटपुट

— सूर्योदय
स्रोत
8

मैं बस ऐसा करने के साथ खेल रहा था, और यह मेरे लिए सबसे अच्छा विकल्प प्रतीत हो रहा था:

<style>
    tr { 
        display: table;            /* this makes borders/margins work */
        border: 1px solid black;
        margin: 5px;
    }
</style>

ध्यान दें कि यह द्रव / स्वचालित कॉलम चौड़ाई के उपयोग को रोक देगा , क्योंकि कोशिकाएं अब अन्य पंक्तियों में उन लोगों के साथ संरेखित नहीं होंगी, लेकिन सीमा / रंग स्वरूपण अभी भी ठीक काम करता है। समाधान टीआर और टीडी को एक निर्दिष्ट चौड़ाई (या तो पीएक्स या%) देना है।

tr.myClassयदि आप इसे केवल कुछ पंक्तियों में लागू करना चाहते हैं, तो बेशक आप चयनकर्ता बना सकते हैं । जाहिरा तौर पर display: tableIE 6/7 के लिए काम नहीं करता है, लेकिन वहाँ शायद अन्य हैक्स (हैलआउट) है कि उन लोगों के लिए काम कर सकते हैं। :-(

— साइमन पूर्व
स्रोत
6
यह समाधान गलत है: "डिस्प्ले: टेबल" पूरी पंक्ति को एक टेबल सेल में डालता है --- आप तालिका की अन्य पंक्तियों के संबंध में स्वरूपण खो देते हैं। मैंने फ़ायरफ़ॉक्स और क्रोमियम में यह कोशिश की।
— याकोव बेल
याकोव, मुझे लगता है कि आप जो उल्लेख कर रहे हैं, वह यह है कि द्रव स्तंभ की चौड़ाई अब तालिका में अन्य पंक्तियों के साथ संरेखित नहीं होती है (जैसा कि इस फिडल में देखा गया है: jsfiddle.net/MrKtw ) लेकिन बॉर्डर / रंग स्वरूपण अभी भी ठीक काम करता है। समाधान टीआर और टीडी को एक निर्दिष्ट चौड़ाई (या तो पीएक्स या%) देना है।
— साइमन ईस्ट
साइमन, यह दिखाने के लिए कि मेरा क्या मतलब है, मैंने फोर्क किया और आपकी फ़ाइडल को बदल दिया। इसे देखें: jsfiddle.net/a6DZV --- मैं केवल एक पंक्ति में "प्रदर्शन: तालिका" को लागू करता हूं। जैसा कि आप देखते हैं, यह इस पंक्ति को प्रभावी रूप से तालिका के एक कक्ष में बदल देता है। दूसरे शब्दों में: आपको दूसरी तालिका के सेल के अंदर एक-पंक्ति तालिकाओं को घोंसले के रूप में एक ही आउटपुट मिलता है (और इस आंतरिक तालिका की सीमा दिखाते हुए)। आपका समाधान DOM में कुछ नोड्स बचाता है, लेकिन उतना संगत नहीं है।
— याकोव बेल
3

यहाँ tbody तत्वों का उपयोग करने का एक तरीका है जो इसे करने का तरीका हो सकता है। आप बॉर्डर को tbody पर सेट नहीं कर सकते (उसी तरह जैसे आप tr पर नहीं कर सकते) लेकिन आप बैकग्राउंड कलर सेट कर सकते हैं। यदि आप जिस प्रभाव को प्राप्त करना चाहते हैं, वह एक सीमा के बजाय पंक्तियों के समूहों पर एक पृष्ठभूमि रंग के साथ प्राप्त किया जा सकता है।

<table cellspacing="0">  
    <tbody>
        <tr>    
            <td>no border</td>    
            <td>no border here either</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
            <td>one</td>    
            <td>two</td>  
        </tr>  
        <tr>    
            <td>three</td>    
            <td>four</td>  
        </tr>  
    <tbody>
        <tr>    
             <td colspan="2">once again no borders</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
             <td colspan="2">hello</td>  
        </tr>
    <tbody>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>
— sipwiz
स्रोत
2

समूह पंक्तियों को <tbody>टैग का उपयोग करके और फिर शैली लागू करें।

<table>
  <tr><td>No Style here</td></tr>
  <tbody class="red-outline">
    <tr><td>Style me</td></tr>
    <tr><td>And me</td></tr>
  </tbody>
  <tr><td>No Style here</td></tr>
</table>

और स्टाइल में सीएसएस

.red-outline {
  outline: 1px solid red;
}
— सीएसआई
स्रोत
1

एक और तरीका है कि मैं ऐसा करने के लिए सोच सकता हूं कि प्रत्येक पंक्ति को घेरने के लिए आपको एक नेस्टेड तालिका में एक सीमा की आवश्यकता होती है। यह सीमा को करना आसान बना देगा लेकिन संभावित रूप से अन्य लेआउट मुद्दों को बनाएगा, आपको मैन्युअल रूप से तालिका कोशिकाओं आदि पर चौड़ाई निर्धारित करनी होगी।

आपका दृष्टिकोण अच्छी तरह से आपके अन्य लेआउट rerquirements के आधार पर सबसे अच्छा हो सकता है और यहाँ सुझाया गया दृष्टिकोण सिर्फ एक संभावित विकल्प है।

<table cellspacing="0">  
    <tr>    
        <td>no border</td>    
        <td>no border here either</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>one</td>    
                        <td>two</td>  
                  </tr>  
                  <tr>    
                      <td>three</td>    
                      <td>four</td>  
                  </tr>  
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">once again no borders</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>hello</td>  
                   </tr>
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>
— sipwiz
स्रोत
आपके उत्तर के लिए धन्यवाद; हालांकि आप लेआउट के मुद्दों के बारे में सही हैं - मैं कॉलम को हाथ से किए बिना पंक्तिबद्ध करना पसंद करूंगा। कक्षा को <tr> टैग पर लागू करने के बारे में क्या - क्या यह संभव है?
— काइल क्रोनिन
यदि आप "तालिका-लेआउट: निश्चित" के साथ एक तालिका का उपयोग करते हैं और स्पष्ट रूप से प्रत्येक स्तंभ की चौड़ाई निर्धारित करते हैं (<col> का उपयोग करके या केवल पहली पंक्ति में कोशिकाओं की चौड़ाई सेट करके), तो कॉलम सामग्री की परवाह किए बिना पंक्तिबद्ध होगा। आपको तालिकाओं को घोंसले बनाने की भी आवश्यकता नहीं है, तीन अलग-अलग तालिकाओं का उदाहरण ठीक होगा।
— बोबिन्स
1

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

ठीक है, अगर आप जावास्क्रिप्ट समाधान में रुचि रखते हैं, तो jQuery (मेरे पसंदीदा दृष्टिकोण) का उपयोग करके, आप इस काफी डरावने कोड के साथ समाप्त होते हैं:

<html>
<head>

<style type="text/css">
td.top { border-top: thin solid black; }
td.bottom { border-bottom: thin solid black; }
td.left { border-left: thin solid black; }
td.right { border-right: thin solid black; }
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
  box(2, 1, 2, 2);
});

function box(row, col, height, width) {
  if (typeof height == 'undefined') {
    height = 1;
  }
  if (typeof width == 'undefined') {
    width = 1;
  }
  $("table").each(function() {
    $("tr:nth-child(" + row + ")", this).children().slice(col - 1, col + width - 1).addClass("top");
    $("tr:nth-child(" + (row + height - 1) + ")", this).children().slice(col - 1, col + width - 1).addClass("bottom");
    $("tr", this).slice(row - 1, row + height - 1).each(function() {
      $(":nth-child(" + col + ")", this).addClass("left");
      $(":nth-child(" + (col + width - 1) + ")", this).addClass("right");
    });
  });
}
</script>
</head>
<body>

<table cellspacing="0">
  <tr>
    <td>no border</td>
    <td>no border here either</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td colspan="2">once again no borders</td>
  </tr>
</tfoot>
</table>
</html>

मैं खुशी से इसे करने के आसान तरीकों पर सुझाव लूंगा ...

— cletus
स्रोत
1
लगता है जैसे आप सिर्फ td टैग में कक्षाएं जोड़ रहे हैं? यह कुछ सर्वर-साइड स्क्रिप्ट के साथ क्यों नहीं किया जा सकता है, सांख्यिकीय रूप से उत्पन्न या केवल हाथ से सबसे खराब स्थिति में? मेरे लिए जावास्क्रिप्ट दुरुपयोग की तरह दिखता है।
— थॉमस
3
वास्तव में एक जावास्क्रिप्ट समाधान के लिए पोस्टर ASKED। आप यह नहीं कह सकते कि यह जावास्क्रिप्ट का दुरुपयोग है क्योंकि पर्याप्त जानकारी नहीं है। उदाहरण के लिए, क्या उपयोगकर्ता द्वारा क्लिक करने के कारण सीमाएँ जोड़ी जा रही हैं? यदि ऐसा है, तो सर्वर समाधान गलत है।
— cletus
जानकारी की कमी के बारे में क्षमा करें। यह सर्वर-साइड जनरेट किया जाएगा, इसलिए यह सच है कि मैं केवल कक्षाओं में मैन्युअल रूप से जोड़ सकता हूं, लेकिन मुझे यह पसंद है कि जेएस समाधान ऐसा करने के लिए एक सरल इंटरफ़ेस कैसे प्रदान करता है। इसलिए जब मैं शायद JS के साथ नहीं जाऊंगा तो यह एक अच्छा समाधान है।
— काइल क्रोनिन
0

ट्रिक आउटलाइन प्रॉपर्टी के साथ है जो थोड़े से संशोधन के साथ एनगमेंट के जवाब के लिए धन्यवाद है

इस वर्ग का उपयोग करें 

.row-border{
    outline: thin solid black;
    outline-offset: -1px;
}

फिर HTML में

<tr>....</tr>
<tr class="row-border">
    <td>...</td>
    <td>...</td>
</tr>

और परिणाम यहाँ छवि विवरण दर्ज करें उम्मीद है कि यह आपकी मदद करता है

— बशीर अल-मोमानी
स्रोत
-5

एक आसान तरीका है टेबल को सर्वर साइड कंट्रोल बनाना। आप इसके समान कुछ का उपयोग कर सकते हैं:

Dim x As Integer
table1.Border = "1"

'Change the first 10 rows to have a black border
 For x = 1 To 10
     table1.Rows(x).BorderColor = "Black"
 Next

'Change the rest of the rows to white
 For x = 11 To 22
     table1.Rows(x).BorderColor = "White"
 Next
— कर्टिस
स्रोत
1
ओपी इसे करने के लिए एक आसान तरीका पूछ रहा है
— 22-22 बजे
2
लापरवाह रहें, ओपी इसे HTML / CSS में करने का एक आसान तरीका भी पूछ रहा है। मुझे उनके प्रश्न VB या VBA कीवर्ड में कहीं भी दिखाई नहीं देते हैं। मेरा सुझाव है कि आपके पास हमारे सहायता अनुभाग पर एक नज़र है: stackoverflow.com/help/how-to-answer गुड लक।
— फोर्समैजिक
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.