html एक टेबल में विशिष्ट पंक्तियों के चारों ओर सीमा?



css border (7)

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

ठीक है, अगर आप जावास्क्रिप्ट समाधान में रुचि रखते हैं, तो 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>

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

https://ffff65535.com

मैं कुछ 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> को लागू करने का प्रयास किया लेकिन यह काम नहीं किया। (पीएस मैं सीएसएस के लिए नया हूं, इसलिए शायद यह वास्तव में एक बुनियादी समाधान है जिसे मैंने याद किया है।)

नोट: मुझे कई सीमावर्ती अनुभाग होने की आवश्यकता है। मूल विचार यह है कि कई सीमाओं वाले प्रत्येक सीमा वाले क्लस्टर हैं।


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

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

<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>

चाल छोटे बदलाव के साथ enigment के जवाब के लिए रूपरेखा संपत्ति के साथ है

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

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

फिर एचटीएमएल में

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

और नतीजा है उम्मीद है कि यह आपकी मदद करता है


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

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>

आउटपुट:

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


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

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

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

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


यदि आप पैरेंट टेबल पर border-collapse करने के लिए border-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>

आउटपुट:


समूह को <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>  

और style.css में सीएसएस

.red-outline {
  outline: 1px solid red;
}




css-tables