একটি সারণিতে নির্দিষ্ট সারিগুলির চারদিকে সীমানা?

120

আমি এমন কিছু এইচটিএমএল / সিএসএস ডিজাইন করার চেষ্টা করছি যা একটি সারণীতে নির্দিষ্ট সারিগুলির চারদিকে সীমানা রাখতে পারে। হ্যাঁ, আমি জানি যে লেআউটটির জন্য আমার টেবিলগুলি ব্যবহার করার কথা সত্যই নয় তবে এখনও এটি পুরোপুরি প্রতিস্থাপনের জন্য পর্যাপ্ত সিএসএস জানি না।

যাইহোক, আমার একাধিক সারি এবং কলাম সহ একটি টেবিল রয়েছে, কিছুটি সারি স্প্যান এবং কলস্প্যানের সাথে একত্রীভূত হয়েছে এবং আমি টেবিলের কয়েকটি অংশের চারপাশে একটি সাধারণ সীমানা রাখতে চাই। বর্তমানে, আমি 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
অফ-টপিক তবে আমি কেবল বলতে চেয়েছিলাম, টেবিলগুলি ডেটা প্রদর্শন করার সময় টেবিলগুলি পুরোপুরি উপযুক্ত এবং সুপারিশ করা হয় ...
— এমডি 1337

উত্তর:

114

কীভাবে tr {outline: thin solid black;}? টিআর বা টডি উপাদানগুলিতে আমার জন্য কাজ করে এবং IE 8+ সহ সর্বাধিক ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ বলে মনে হয় তবে এর আগে নয়।

— enigment
সূত্র
আমি একটি টেবিলের একাধিক সারির চারপাশে একটি একক সীমানা রাখার বিষয়ে জিজ্ঞাসা করছিলাম, মূলত এটিকে একাধিক বিভাগে মূলত দৃষ্টিভঙ্গি করে ভাগ করা কিন্তু একই টেবিলের মধ্যে যাতে বিভিন্ন বিভাগের স্টাফগুলি সারিবদ্ধ হয়।
— কাইল ক্রোনিন
3
বুঝেছি, আমারও এটি দরকার ছিল। সারিগুলির যে সেটটি আপনি চান তাদের নিজস্ব টিডির চারদিকে একটি সীমানা সংযুক্ত করুন এবং উপরের সিএসএস তাদের সেটগুলির চারপাশে একটি সীমানা তৈরি করবে - যেমন, শীর্ষ সারিতে একটি শীর্ষ সীমানা, নীচের সারিতে নীচে একটি সীমানা এবং বাম এবং টিবিতে সমস্ত সারিতে ডান সীমানা। সীমানাগুলি আসলে এই সারিগুলিতে "চালু" থাকে না, তারা কেবল টিবিটির রূপরেখায় থাকে, কেবল প্রভাবটি বর্ণনা করার চেষ্টা করে।
— এনগিগমেন্ট
ওহ, আমি দেখছি, একাধিক টিবিডি - এটি কাজ করে এবং এমন কিছু যা আমি বিবেচনা করি নি। আপভোটড :)
— কাইল ক্রোনিন
আমি আপনার কাছে কিছু সুন্দর গতিশীল ডেটা না থাকলে টেবিডিস সংজ্ঞায়িত করার পরিবর্তে নবম শিশু () সিএসএস সম্পত্তি ব্যবহার করার পরামর্শ দেব would নবম-শিশু (), নবম-সর্বশেষ-শিশু () এবং না () ব্যবহার করে, আপনি যে কোনও সারি / কোষ পছন্দ করতে পারেন (যতক্ষণ আপনি সারণীতে জিনিসগুলির সম্পর্কিত সূচকগুলি জানেন) know উদাহরণস্বরূপ, আপনি উপরের দুটি এবং নীচের অংশে tr সহ সমস্ত সারি নির্বাচন করতে পারেন: নয় (: নবম-শিশু (-এন + 2)): নয় (: নবম-সর্বশেষ-শিশু (1))
— বিটি
1
লক্ষ্য করুন রূপরেখা নেই না একটি উপাদান সীমানা নির্দিষ্ট পক্ষের সম্ভাবনা আছে। উদাহরণস্বরূপ কোনও "রূপরেখা-শীর্ষ" নেই। এটি একটি সীমাবদ্ধ সমাধান
— বিটি
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>মধ্যে। এই সমাধানে কিছু ভুল আছে? আমার কি সচেতন হওয়া উচিত এমন কোনও ক্রস প্ল্যাটফর্ম সমস্যা আছে?

— কাইল ক্রোনিন
সূত্র
ব্রাউজারশটগুলির মাধ্যমে সবেমাত্র একটি পরীক্ষা চালিয়েছে এবং এটি আই (সমস্ত সংস্করণ) প্রথম শিশু এবং শেষ সন্তানের বৈশিষ্ট্যগুলি পছন্দ করে না বলে মনে হচ্ছে। : - /
— কাইল ক্রোনিন
1
(!) অর্থাৎ 7 ও 8 সমর্থন প্রথম সন্তান, কিন্তু কোনোটাই সমর্থন গত সন্তান মত দেখায় msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
— mechanical_meat
cellspacingএইচটিএমএল 5 এ বৈশিষ্ট্যটি হ্রাস করা হয়েছে। সিএসএসের মতো মনে হচ্ছে 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>

আউটপুট:

এইচটিএমএল আউটপুট

— সূর্যোদয়
সূত্র
8

আমি এটি করার সাথে সাথে কেবল খেলছিলাম এবং এটি আমার কাছে সেরা বিকল্প বলে মনে হয়েছিল:

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

নোট করুন যে এটি তরল / স্বয়ংক্রিয় কলামের প্রস্থের ব্যবহারকে আটকাবে , যেহেতু কোষগুলি আর সারিগুলির সাথে আর একত্রিত হবে না, তবে সীমানা / বর্ণ বিন্যাস এখনও ঠিক আছে। সমাধানটি হল টিআর এবং টিডিগুলিকে একটি নির্দিষ্ট প্রস্থ (px বা%) দেওয়া।

আপনি tr.myClassযদি এটি নির্দিষ্ট কিছু সারিতে প্রয়োগ করতে চান তবে অবশ্যই আপনি নির্বাচককে তৈরি করতে পারেন। স্পষ্টতই display: tableআই আই 6/7 এর জন্য কাজ করে না, তবে সম্ভবত অন্যান্য হ্যাকগুলি রয়েছে (হ্যাসলআউট?) যা তাদের জন্য কাজ করতে পারে। :-(

— সাইমন ইস্ট
সূত্র
6
এই সমাধানটি ভুল: "প্রদর্শন: টেবিল" পুরো সারিটি এক টেবিলের ঘরে রাখে --- আপনি টেবিলের অন্যান্য সারিগুলির সাথে শ্রদ্ধা হারিয়ে ফেলেন। আমি এটি ফায়ারফক্স এবং ক্রোমিয়ামে চেষ্টা করেছি।
— ইয়াকভ বেলচ
ইয়াকভ, আমি মনে করি আপনি যা উল্লেখ করছেন তা হ'ল তরল কলামের প্রস্থগুলি সারণীতে থাকা অন্যান্য সারিগুলির সাথে আর প্রান্তিককরণ করবে না (যেমন এই ফিডলে দেখা গেছে: jsfiddle.net/MrKtw ) তবে সীমানা / বর্ণ বিন্যাস এখনও ঠিক আছে। সমাধানটি হল টিআর এবং টিডিগুলিকে একটি নির্দিষ্ট প্রস্থ (px বা%) দেওয়া।
— সাইমন পূর্ব
সাইমন, আমি কী বোঝাতে চাইছি তা বোঝাতে আমি আপনার কোলাহলটি পরিবর্তন করেছি এবং পরিবর্তন করেছি। এটি দেখুন: jsfiddle.net/a6DZV --- আমি "প্রদর্শন: টেবিল" বিন্যাসটি কেবল একটি সারিতে প্রয়োগ করি। আপনি দেখতে পাচ্ছেন, এটি এই সারিটি কার্যকরভাবে টেবিলের একটি ঘরে পরিণত করে। অন্য কথায়: আপনি অন্য সারণীর ঘরের মধ্যে এক সারি টেবিলগুলি বাসা বাঁধার সমান আউটপুট পাবেন (এবং এই অভ্যন্তরের সারণির সীমানা দেখিয়ে)। আপনার সমাধানটি ডিওমে কয়েকটি নোড সংরক্ষণ করে তবে এটি উপযুক্ত নয়।
— ইয়াকভ বেলচ
3

এখানে টিডি উপাদান ব্যবহার করে এমন একটি পদ্ধতি যা এটি করার উপায় হতে পারে। আপনি সীমানাটি কোনও শিরোনামে সেট করতে পারবেন না (আপনি যেমন ট্রিতে না পারেন ঠিক তেমন) তবে আপনি পটভূমির রঙ সেট করতে পারেন। আপনি যে প্রভাবটি অর্জন করতে চান তা যদি সীমাগুলির পরিবর্তে সারিগুলির গোষ্ঠীতে পটভূমির রঙের সাথে পাওয়া যায় তবে এটি কাজ করবে।

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

এবং স্টাইল। CSS এ সিএসএস

.red-outline {
  outline: 1px solid red;
}
— সিএসআই
সূত্র
1

এটি করার জন্য আমি কেবল অন্য উপায়টিই ভাবতে পারি তা হল নীড়যুক্ত টেবিলের চারপাশে আপনার প্রতিটি সারি লাগানো দরকার। এটি সীমানাটি করা সহজ করে তুলবে তবে সম্ভাব্যভাবে অন্যান্য লেআউট সমস্যা তৈরি করবে, আপনাকে ম্যানুয়ালি টেবিলের ঘরগুলিতে প্রস্থ নির্ধারণ করতে হবে ইত্যাদি etc.

আপনার অন্যান্য বিন্যাসের প্রয়োজনীয়তার উপর নির্ভর করে আপনার পন্থাটি সর্বোত্তম হতে পারে এবং এখানে প্রস্তাবিত পদ্ধতির সম্ভাব্য বিকল্প মাত্র।

<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
দেখে মনে হচ্ছে আপনি কেবল টিডি ট্যাগগুলিতে ক্লাস যুক্ত করছেন? কেন এটি কোনও সার্ভার-সাইড স্ক্রিপ্ট দিয়ে করা গেল না, স্ট্যাটিকালি উত্পন্ন হয়েছে, বা কেবল হাতে হাতে খারাপ অবস্থা? আমার কাছে জাভাস্ক্রিপ্ট অপব্যবহারের মতো দেখাচ্ছে।
— টমাস
3
আসলে পোস্টারটি জাভাস্ক্রিপ্ট সমাধানের জন্য জিজ্ঞাসা করেছে। পর্যাপ্ত তথ্য নেই বলে আপনি এটি জাভাস্ক্রিপ্টের অপব্যবহার বলতে পারবেন না। উদাহরণস্বরূপ, ব্যবহারকারীরা ক্লিক করার কারণে সীমানা যুক্ত হচ্ছে? যদি তাই হয় তবে একটি সার্ভার সমাধান ভুল।
— ক্লিটাস
তথ্যের অভাবের জন্য দুঃখিত। এটি সার্ভার-সাইড উত্পন্ন হবে, সুতরাং এটি সত্য যে আমি নিজেই ক্লাসগুলিতে ম্যানুয়ালি যোগ করতে পারতাম, তবে আমি কীভাবে জেএস সমাধানটি এটি করার জন্য একটি সহজ ইন্টারফেস সরবরাহ করে তা পছন্দ করি। সুতরাং আমি সম্ভবত জেএসের সাথে যাব না এটি দেখতে একটি ভাল সমাধান।
— কাইল ক্রোনিন
0

কৌশলটি সামান্য পরিবর্তনের সাথে এনগিমেন্টের জবাবের জন্য রূপরেখা সম্পত্তি সহকারে

এই ক্লাস ব্যবহার করুন 

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

তারপরে এইচটিএমএলে

<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
ওপি এটি করার সহজতর
— উপায়ের
2
সাবধান থাকুন, ওপি এইচটিএমএল / সিএসএসে এটি করার সহজতর উপায়ের জন্যও জিজ্ঞাসা করছে। আমি তার প্রশ্নে কোথাও ভিবি বা ভিবিএ কীওয়ার্ড দেখতে পাচ্ছি না। আমি আপনাকে আমাদের সহায়তা বিভাগটিতে নজর দিতে পরামর্শ দিচ্ছি: stackoverflow.com/help/how-to-answer শুভকামনা ।
— ফোর্সমেজিক
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.