আমি পৃথক কক্ষগুলি রঙ না করে CSS ব্যবহার করে টেবিল কলামগুলি রঙ করতে পারি?

121

নীচে পুরোপুরি কলামগুলির স্প্যানগুলি রঙ করার কোনও উপায় আছে? নীচে দেখুন উদাহরণ দেখুন:

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
স্নিপেট প্রসারিত করুন

এবং আমি রঙের আরও ভাল উপায় (কম কোড, স্বতন্ত্র রঙিন নয়) খুঁজছি, উদাহরণস্বরূপ, "ইঞ্জিন" এবং "বডি" স্প্যানস, এর নীচে থাকা সমস্ত কক্ষগুলি সহ #DDD

<style>
  .color {
    background-color: #DDD
  }
</style>
<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>
স্নিপেট প্রসারিত করুন

html  css 
— ডেনিস
সূত্র
20
@ জিপজিট: আপনার যদি কোনও টেবিলের প্রয়োজন হয় তবে টেবিলগুলির সাথে কোনও ভুল নেই - উদাহরণস্বরূপ যদি তথ্যটি প্রকৃতির টেবুলার হয় (দামের সাথে পণ্যগুলির একটি টেবিলের মতো)। টেবিলগুলির সমালোচনা এগুলি বিন্যাসের সরঞ্জাম হিসাবে ব্যবহার করার বিরুদ্ধে।
— sleske
5
ভাবুন কীভাবে এটি হট নেটওয়ার্ক প্রশ্নগুলিতে প্রবেশ করেছে
— মিঃ এলিয়েন
এটি গতকাল জিজ্ঞাসা করা হয়েছিল এবং এখনই, প্রশ্নটিতে 24 এবং এ-তে 43 টি উপস্থাপনা রয়েছে এবং স্বীকৃত উত্তরটি ছিল এবং এখনও পাগলের মতো উপচে পড়েছে
— ডেনিস
2
লোকেরা জানত না এমন জিনিসগুলি শিখতে পছন্দ করে, এটি jQuery নম্বর পার্সিংয়ের একটি ডকুমেন্টেড অদ্ভুততা হোক বা একটি HTML ট্যাগ / ধারণা যা পরিষ্কার জিনিসগুলি করে, তারা জানত না :)
— ডেনিস
1
@ ক্যানন হি হ্যাঁ, যাইহোক শালীন উত্তর ...
— মিঃ এলিয়েন

উত্তর:

167

হ্যাঁ, আপনি পারেন ... <col>উপাদানটি ব্যবহার করে :

.grey {
  background-color: rgba(128,128,128,.25);
}
.red {
  background-color: rgba(255,0,0,.25);
}
.blue {
  background-color: rgba(0,0,255,.25);
}
<table>
  <colgroup>
    <col class="grey" />
    <col class="red" span="3" />
    <col class="blue" />
  </colgroup>
  <thead>
    <tr>
      <th>#</th>
      <th colspan="3">color 1</th>
      <th>color 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>
      <td>blue</td>
    </tr>
    <tr>
      <th>2</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>      
      <td>blue</td>
    </tr>
  </tbody>
</table>
স্নিপেট প্রসারিত করুন

দ্রষ্টব্য : আপনি spanএকাধিক কলামে কল সংজ্ঞা প্রয়োগ করতে বৈশিষ্ট্যটি ব্যবহার করতে পারেন ।
আরও দেখুন :<colgroup>

— অনুশাসন
সূত্র
10
নোট করুন যে আপনার <col span="3" />বিস্তৃত কলামগুলির জন্য প্রয়োজন ।
— নিট দ্য ডার্ক আবসোল
এটির পরিবর্তে colgroupসমস্ত কলাম রয়েছে এমনটি ব্যবহার করা অর্থহীন ।
— Jukka K. Korpela
14
@ জুক্কা.কর্পেলা আপনার পছন্দটিকে সঠিকভাবে নির্দিষ্ট করবেন কিনা তা নির্বিশেষে এটি সেভাবে পার্স হয়ে যায় <tbody>। আমি কেবল উল্লেখ করতে পছন্দ করি
— ক্যানন
আমি দেখতে পাচ্ছি যে colট্যাগটির ব্যবহার
— এতটা
3
যদি অন্য কেহ জানতে আগ্রহী কেন এই কাজ, অথবা যার সিএসএস বৈশিষ্ট্য কলাম উপর ব্যবহার করা যেতে পারে, সিএসএস 2.1 বৈশিষ্ট প্রাসঙ্গিক বিভাগে হয় 17.3 এবং 17.5.1 ।
— মেরিটন
18

আপনি তার জন্য nth-childনির্বাচকটি ব্যবহার করতে পারেন :

tr td:nth-child(2),
tr td:nth-child(3) {
  background: #ccc;
}
<table>
  <tr>
    <th colspan="2">headline 1</th>
    <th>headline 2</th>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
</table>
স্নিপেট প্রসারিত করুন

— মার্কাস কোটলান্ডার
সূত্র
1
এগুলির colচেয়ে স্টাইলিং নিজের চেয়ে ভাল (পরিষ্কার এবং দ্রুত)।
— tomasz86
9

এটি স্টাইলের কক্ষগুলির পক্ষে সাধারণত সর্বাধিক সহজ (কলাম অনুসারে যদি প্রয়োজন হয়) তবে কলামগুলি বিভিন্ন উপায়ে স্টাইল করা যায়। একটি সহজ উপায় হ'ল colgroupউপাদানগুলিতে কলামগুলি মোড়ানো এবং এতে স্টাইল সেট করা। উদাহরণ:

<style>
.x {
    background-color: #DDD
}
</style>
<table border="1">
<col>
<colgroup class=x>
  <col>
  <col>
  <col>
</colgroup>
<col>
<colgroup class=x>
  <col>
  <col>
</colgroup>
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>
স্নিপেট প্রসারিত করুন

— জুক্কা কে। কোরপেলা
সূত্র
1
পৃথক যদি colভিতরে উপাদানের colgroupগুলি স্বতন্ত্রভাবে স্টাইল করা প্রয়োজন হবে না, এছাড়াও আপনি সেট করতে পারেন spanউপর অ্যাট্রিবিউট colgroupনিজেই - <colgroup span="2">- পরিবর্তে স্থাপন colএটা ভিতরে উপাদান।
— মিস্টারমানসাম
5

আপনি CSS3 ব্যবহার করতে পারেন: http://jsfiddle.net/snuggles08/bm98g8v8/

<style>
  .table td:nth-of-type(1) {
    background: red;
  }
  .table td:nth-of-type(5) {
    background: blue;
  }
  .table td:nth-of-type(3) {
    background: green;
  }
  .table td:nth-of-type(7) {
    background: lime;
  }
  .table td:nth-of-type(2) {
    background: skyblue;
  }
  .table td:nth-of-type(4) {
    background: darkred;
  }
  .table td:nth-of-type(6) {
    background: navy;
  }
</style>
Styled table:
<table border="1" class="table">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
<hr>Unstyled table:
<table border="1" class="table2">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
স্নিপেট প্রসারিত করুন

— leo60228
সূত্র
5

আমি এর জন্য nth-childসিএসএস সিউডো-ক্লাস ব্যবহার করব:

tr td:nth-child(2), tr th:nth-child(2), tr td:nth-child(3), tr td:nth-child(4), tr th:nth-child(4), tr td:nth-child(6), tr td:nth-child(7){
    background-color: #DDD;
}

কোড স্নিপেট দেখান

— হাওয়ার্ড রেনোলেট
সূত্র
5

নিম্নলিখিত বাস্তবায়ন নবম শিশু নির্বাচক এবং কাজ করা উচিত ...

<style type="text/css">
    th:nth-child(2),
    th:nth-child(4)
    {
        background-color: rgba(255, 0, 0, 1.0);
    }

    td:nth-child(2), 
    td:nth-child(3),
    td:nth-child(4),
    td:nth-child(6),
    td:nth-child(7)
    {
        background-color: rgba(255, 0, 0, 0.5);
    }
</style>
— খাওয়া-ঘুম-কোড
সূত্র
আপনি সম্ভবত একটি চান >, TR এবং TD মধ্যে যেহেতু আপনি শুধুমাত্র শুধুমাত্র টেবিল ভিতরে TRS ভিতরে TDS নির্বাচন করা হচ্ছে ... কষ্ট গিয়েছিলাম (tablegroups কিছু মনে।)
— ANeves
উত্তরের জন্য ধন্যবাদ, এটি ভিন্ন সমাধান
— মোহাম্মদ করমানি
এটি একটি ওভারকিল ওভার স্পেসিফিকেশন পারফরম্যান্সের জন্য খারাপ। table tr tdঅপ্রয়োজনীয় কারণগুলি tdসর্বদা ভিতরে থাকে trএবং table।
— tomasz86
4

নবম-বাচ্চা এক্সপ্রেশন ব্যবহার করে আমার সংস্করণ:

প্রথমে কক্ষগুলি রঙ করার জন্য ক্যাসকেড বিধিগুলির সিএসএস ধারণাটি ব্যবহার করে এবং তারপরে আমি স্বচ্ছ হতে চাই এমন বিষয়গুলি রঙিন করতে। প্রথম নির্বাচক প্রথম একের পরে সমস্ত ঘর নির্বাচন করে এবং দ্বিতীয়টি স্বচ্ছ হতে পঞ্চম ঘরটি নির্বাচন করে।

<style type="text/css">
  /* colored */
  td:nth-child(n+2) { background-color: #ddd }
  /* uncolored */
  td:nth-child(5) { background-color: transparent }
</style>

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
স্নিপেট প্রসারিত করুন

এই আকর্ষণীয় তথ্যসূত্রটি দেখুন: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

— Marcs
সূত্র
1

এটি অনেক দুর্দান্ত উত্তর সহ একটি পুরানো প্রশ্ন। কেবলমাত্র নির্বাচিত -nএবং nth-last-childনির্বাচকদের যোগ করতে চেয়েছিলেন যা এখনও উল্লেখ করা হয়নি। একাধিক কলামে সিএসএস প্রয়োগ করার সময় এগুলি সহায়ক but

/* Select the first two */
table tr td:nth-child(-n + 2) {
  background-color: lightblue;
}

/* Select all but the first two */
table tr td:not(:nth-child(-n + 2)) {
    background-color:lightgreen;
}

/* Select last two only */
table tr td:nth-last-child(-n + 2) {
  background-color:mistyrose;
}

/* Select all but the last two */
table tr td:not(:nth-last-child(-n + 2)) {
    background-color:yellow;
}

জেএসফিডাল: https://jsfiddle.net/3rpf5oht/2/

— elPastor
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.