কোনও টেবিলের কেবল ২ য় কলাম কীভাবে পরিবর্তন করবেন তা সিএসএস ব্যবহার করে


126

কেবলমাত্র সিএসএস ব্যবহার করে, আমি কীভাবে কেবল কোনও টেবিলের ২ য় কলামের সিএসএসকে ওভাররাইড করতে পারি।

আমি ব্যবহার করে সমস্ত কলামে যেতে পারি:

.countTable table table td

আমি এই পৃষ্ঠায় এইচটিএমএল এটিতে আমার সাইট না হওয়ায় এটি পরিবর্তন করতে পারবেন না।

ধন্যবাদ।

css 

উত্তর:


239

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

.countTable table table td:nth-child(2)

তবে নোট করুন, এটি পুরানো ব্রাউজারগুলিতে (বা আইই) কাজ করবে না, আপনাকে সে ক্ষেত্রে কোষগুলিকে একটি শ্রেণি দেওয়া বা জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।


এটি কেবল প্রতিটি সারণীতে দ্বিতীয় কক্ষ দেবে, প্রতিটি সারিতে দ্বিতীয় ঘর নয়। আপনার প্রয়োজন .মাউন্ট টেবিল টেবিল টিআর টিডি: নবম চাইল্ড (2)
ডেক্সি

3
@ ডিক্সি - এটি সঠিক নয়, এটি নির্বাচক কী তা বিবেচনা করে না। nth-childউপাদানটি সন্ধান করার পরে প্রয়োগ করা হয়, এবং এটি যে- nthযাবতীয় পিতামাতার সাথে তুলনা করা হয়, তা নির্বাচকের মধ্যে থাকুক বা না থাকুক। : আপনি এই এখানে কাজ দেখতে পারেন jsfiddle.net/JQQPz
নিক Craver

টিডি-র ভিতরে কেবলমাত্র একটি সিএসএসের পরিবর্তন সম্পর্কে কীভাবে: নবম শিশু (২)। <a> ট্যাগ পছন্দ করুন। এটি কি টিডি হতে চলেছে: নবম সন্তান (২) {}?
আইভো সান

1
@ আইভরি-স্যান্টোস কেবল aশেষের দিকে যুক্ত করুন, উদাহরণস্বরূপ td:nth-child(2) athat উপাদানের নীচে স্টাইলের লিঙ্কগুলিতে।
নিক ক্র্যাভার

আপনার কেন দুবার টেবিল রয়েছে (নীচের অন্যান্য উত্তরগুলির তুলনায়)?
উলফি

26

এটা চেষ্টা কর:

.countTable table tr td:first-child + td

অন্যান্য কলামগুলিকে স্টাইল করার জন্য আপনি পুনরাবৃত্তি করতে পারেন:

.countTable table tr td:first-child + td + td {...} /* third column */
.countTable table tr td:first-child + td + td + td {...} /* fourth column */
.countTable table tr td:first-child + td + td + td +td {...} /* fifth column */

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

18

টেবিলের কেবল দ্বিতীয় কলামটি পরিবর্তন করতে নিম্নলিখিতগুলি ব্যবহার করুন:

সাধারণ কেস:

table td + td{  /* this will go to the 2nd column of a table directly */

background:red

}

আপনার ক্ষেত্রে:

.countTable table table td + td{ 

background: red

}

দ্রষ্টব্য: এটি সমস্ত ব্রাউজারের (আধুনিক এবং পুরানো) এর জন্য কাজ করে that's এজন্য আমি আমার উত্তরটি একটি পুরানো প্রশ্নের সাথে যুক্ত করেছি


শুধু প্রথম কলামটি নির্বাচন করার জন্য কি টুইট করা হবে? টেবিল টিডি ব্যবহার করে {...} অন্যান্য কলামেও সমস্ত ঘর নির্বাচন করে।
j4v1

1
@ j4v1 টেবিল টিডি {ব্যাকগ্রাউন্ড: লাল; first // প্রথম কলামটিতে লাল ব্যাকগ্রাউন্ড টেবিল টিডি + টিডি {পটভূমি থাকবে: নীল; rest // বাকী নীল হবে
আবজূজি

-2

আপনি দ্বিতীয় কলামে প্রতিটি কক্ষের জন্য একটি শ্রেণি নির্ধারণ করতে পারেন।

<table>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
</table>

আমি এটি ব্যবহার করতে পারি না। আমি যেমন বলেছি, এটি আমার পৃষ্ঠা নয় এবং তাই, আমি এইচটিএমএল পরিবর্তন করতে পারি না।

2
নির্বাচকদের ব্যবহারের বিদ্যমান পদ্ধতির তুলনায় @ দুনিয়াড্যান্ড এটি ভাল পন্থা নয়।
প্রধানমন্ত্রী

-2

এই ওয়েবটিতে http://quirksmode.org/css/css2/columns.html আমি সেই সহজ উপায়টি পেয়েছি

<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>..

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