সিএসএস ব্যবহার করে বিকল্প টেবিল সারি রঙ?

462

আমি এটির সাথে বিকল্প সারি রঙের একটি টেবিল ব্যবহার করছি।

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

<table>
  <tr class="d0">
    <td>One</td>
    <td>one</td>
  </tr>
  <tr class="d1">
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

স্নিপেট প্রসারিত করুন

এখানে আমি ক্লাস ব্যবহার করছি trতবে আমি কেবল এর জন্য ব্যবহার করতে চাই table। আমি যখন টেবিলের জন্য ক্লাস ব্যবহার করি তখন trবিকল্পটিতে প্রয়োগ করুন ।

আমি কি সিএসএস ব্যবহার করে এই জাতীয় এইচটিএমএল লিখতে পারি?

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

আমি কীভাবে সারিগুলিতে সিএসএস ব্যবহার করে "জেব্রা ফিতে" রাখতে পারি?

html css html-table

— কালী চরণ রাজপুত
সূত্র

1

- আমি একটি ডেমো n তম-সন্তানের জন্য সব সম্ভব ধরন () ব্যবহার করে তৈরি করেছি xengravity.com/demo/nth-child

— xengravity

760

$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"#fff"});
});

tbody td{
  padding: 30px;
}

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>

স্নিপেট প্রসারিত করুন

একজন সিএসএস নির্বাচক আছেন, সত্যই সিউডো-সিলেক্টর, যাকে এনথ-চাইল্ড বলে। খাঁটি সিএসএসে আপনি নিম্নলিখিতগুলি করতে পারেন:

tr:nth-child(even) {
    background-color: #000000;
}

দ্রষ্টব্য: আইই 8 তে কোনও সমর্থন নেই।

অথবা, যদি আপনার jQuery থাকে:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});

— রাসেল ডায়াস
সূত্র

বিকল্প সারিগুলির হাইপারলিংকের রঙ পরিবর্তন করাও কি সম্ভব? আমি এমনকি সারিটির জন্য আলাদা হাইপারলিংক রঙ এবং অন্যটি বিজোড়ের জন্য চাই। ধন্যবাদ

— عثمان غني

4

দুর্দান্ত উত্তর! তবে কেবল তথ্যের জন্য আরও একটি সিএসএস নির্বাচক রয়েছে যা ব্যবহার করা যেতে পারে। tr:nth-of-type(odd/even)

— নিখিল নানজাপ্পা

2

@ عثمانغني: হ্যাঁ, আপনি ঠিক করবেনtr:nth-child(even) a

— জেরার্ড

1

আপনি যদি আপনার এইচটিএমএলকে গতিশীলভাবে লিখেন তবে কাজ করে না। তারপরে আপনাকে সারিগুলিতে ক্লাস যুক্ত করতে হবে।

— এরিক

2019 সালে: এটি আর সেরা সমাধান নয়। খাঁটি সিএসএস ব্যবহার করুন ।

— চিরামিসু

158

আপনার :nth-child()সিউডো-ক্লাস রয়েছে:

table tr:nth-child(odd) td{
    ...
}
table tr:nth-child(even) td{
    ...
}

:nth-child()এর ব্রাউজারের প্রাথমিক দিনগুলিতে এক ধরণের দুর্বল ছিল। এজন্য সেটিংটি class="odd"এমন একটি সাধারণ কৌশল হয়ে ওঠে। ২০১৩ সালের শেষের দিকে আমি এটা বলতে পেরে আনন্দিত যে আইই and এবং আই finally শেষ পর্যন্ত মারা গেছে (বা যত্ন নেওয়া বন্ধ করতে যথেষ্ট অসুস্থ) তবে আইই 8 এখনও রয়ে গেছে - ধন্যবাদ, এটিই কেবল ব্যতিক্রম।

— আলভারো গঞ্জালেজ
সূত্র

3

সিএসএস শিরোনামে প্রয়োগ না হওয়ায় পছন্দসই উত্তর

— মাইক

হাই এই কয়েক বছর দেরী হয়েছে তবে ক্লিক করা যখন টেবিল সারিতে jqeury সঙ্গে একটি বিজি-রঙের সাথে একটি নির্বাচিত শ্রেণি যুক্ত করার কথা। আমি লক্ষ্য করেছি যে: আপনি নবীন-শিশু সিউডো ক্লাস বিজি-কালারকে ওভাররাইড করে যখন আপনি জকিউরির সাথে একটি "নির্বাচিত" শ্রেণি যুক্ত করেন

— ডিক্কিলসগং

@ ডাচকিলসগ এটি আমার উত্তরের মন্তব্যের পরিবর্তে একেবারে নতুন প্রশ্ন বলে মনে হচ্ছে ...

— গঞ্জালেজ

"জেব্রা ফিতে" (অর্থাত উল্লম্ব) জন্য, শুধু বিনিময় tr:nth-child(odd)সঙ্গে td:nth-of-type(odd)। মনে রাখবেন যে এই ক্ষেত্রে আপনি উপাদানগুলির tdপরিবর্তে আলাদা সিউডো-ক্লাস প্রয়োগ করছেন tr।

— চিরামিসু

36

কেবলমাত্র আপনার এইচটিএমএল কোডের সাথে নিম্নলিখিতগুলি যুক্ত করুন (এর সাথে <head>) এবং আপনার কাজ শেষ।

এইচটিএমএল:

<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

JQuery উদাহরণগুলির চেয়ে সহজ এবং দ্রুত।

— bmich72
সূত্র

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। যতদূর সম্ভব, সিএসএসের স্টাইলিং পরিচালনা করা উচিত, যখন জাভাস্ক্রিপ্ট অন্যান্য বিষয়গুলি পরিচালনা করতে ব্যবহার করা যেতে পারে।

— টর্মোড হগেন

আমি প্রতিদিনের ভিত্তিতে এইচটিএমএল করি না। #cccআমার কাছে একটি বৈধ রঙ কোড বলে মনে হচ্ছে না। তুমি কি ব্যাখ্যা করতে পারো? ধন্যবাদ।

— tommy.carstensen

1

@ tommy.carstensen এটিকে "শর্টহ্যান্ড হেক্সাডেসিমাল ফর্ম" বলা হয়। মূলত এতে #cccপ্রসারিত হয় #cccccc, যার অর্থ প্রতিটি আরজিবি রঙের হেক্সাডেসিমাল মান ccবা দশমিক মান থাকে 204(অর্থাত্ rgb(204, 204, 204))। এটি সম্পর্কে এখানে আরও পড়ুন -> en.wikiki.org/wiki/Web_colors#Shorthand_hexadecimal_form

— নিক গ্রেলে

Chrome সংস্করণ 78.0.3904.108 এ কাজ করে না

— IlludiumPu36

13

আমি কি এইচটিএমএল ব্যবহারের CSS এর সাথে এইভাবে লিখতে পারি?

হ্যাঁ আপনি পারবেন তবে তারপরে আপনাকে :nth-child()সিউডো সিলেক্টরটি ব্যবহার করতে হবে (যার সীমাবদ্ধ সমর্থন রয়েছে):

table.alternate_color tr:nth-child(odd) td{
   /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}

— সরফরাজ
সূত্র

13

বিকল্প সারি রঙের জন্য আমরা বিজোড় এমনকি সিএসএস বিধি এবং jQuery পদ্ধতি ব্যবহার করতে পারি

সিএসএস ব্যবহার করে

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

JQuery ব্যবহার করে

$(document).ready(function()
{
  $("table tr:odd").css("background", "#ccc");
  $("table tr:even").css("background", "#fff");
});

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

<table>
  <tr>
    <td>One</td>
    <td>one</td>
   </tr>
  <tr>
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

স্নিপেট প্রসারিত করুন

— সন্তোষ খলসে
সূত্র

10

উপরের কোডগুলির বেশিরভাগ আইই সংস্করণ দিয়ে কাজ করবে না। IE + অন্যান্য ব্রাউজারগুলির জন্য যে সমাধানটি কাজ করে তা হ'ল।

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>

— শ্রীবন্ত আত্তনায়েক
সূত্র

9

<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>

— প্রণয় রানা
সূত্র

46

ঠিক আছে আমি জানি jQuery এই সাইটে মোটামুটি সর্বব্যাপী তবে নির্বিশেষে আপনার jQuery পোস্ট করা উচিত নয়। এই স্ক্রিপ্টটি নিজের কাজ করবে না।

— অসন্তুষ্ট গোট

4

আপনি নবম-সন্তানের (বিজোড় / সমান) নির্বাচক ব্যবহার করতে পারেন তবে সমস্ত ব্রাউজারগুলি ( যেমন 6-8, এফএফ ভি 3.0 ) এই নিয়মগুলিকে সমর্থন করে না কেন বেশিরভাগ সমাধান জাভাস্ক্রিপ্ট / jquery সমাধানের কোনও ফর্মটিতে ক্লাস যুক্ত করার জন্য ফিরে আসে কেন? বাঘের ডোরা প্রভাব পেতে এই অ-সঙ্গতিপূর্ণ ব্রাউজারগুলির জন্য সারি।

— লাল চত্বর
সূত্র

3

পিএইচপি-তে এটি করার একটি মোটামুটি সহজ উপায় আছে, যদি আমি আপনার ক্যোয়ারীটি বুঝতে পারি তবে আমি ধরে নিই যে আপনি পিএইচপি কোড করেছেন এবং আপনি আউটপুট উন্নত করতে সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করছেন।

ডাটাবেস থেকে গতিশীল আউটপুট ফলাফলের মাধ্যমে পুনরাবৃত্তি করতে লুপের জন্য বহন করবে যা টেবিলে লোড করা হয়। এই মত একটি ফাংশন কল যোগ করুন:

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

তারপরে পৃষ্ঠা বা লাইব্রেরি ফাইলে ফাংশনটি যুক্ত করুন:

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}

}

এখন এটি প্রতিটি সদ্য উত্পন্ন টেবিল সারিতে বর্ণের মধ্যে পরিবর্তনশীল হবে will

সিএসএসের সাথে গোলমাল করার চেয়ে এটি অনেক সহজ যা সমস্ত ব্রাউজারে কাজ করে না।

আশাকরি এটা সাহায্য করবে.

— ছাপ
সূত্র

ধন্যবাদ @মার্ক। এটি ঠিক হয়নি যে সাইটটি পিএইচপি,। নেট বা সাধারণ এইচটিএমএলে থাকবে।

— কালী চরণ রাজপুত