সারণি সারিতে সীমানা-নীচে যুক্ত করুন <tr>

Question

আমি প্রত্যেক সারি নীচে জন্য একটি সীমানা যোগ করার জন্য একটি উপায় প্রয়োজন 3. দ্বারা 3 টেবিল আছে trএবং এটি একটি নির্দিষ্ট রং দিতে।

প্রথমে আমি সরাসরি উপায়ে চেষ্টা করেছি, যেমন:

<tr style="border-bottom:1pt solid black;">

তবে তা কার্যকর হয়নি। সুতরাং আমি এই জাতীয় সিএসএস যুক্ত করেছি:

tr {
border-bottom: 1pt solid black;
}

এখনও কাজ করেনি।

আমি সিএসএস ব্যবহার করতে পছন্দ করব কারণ তারপরে আমাকে styleপ্রতিটি সারিতে কোনও বৈশিষ্ট্য যুক্ত করার দরকার নেই । আমি এর সাথে কোনও borderবৈশিষ্ট্য যুক্ত করিনি <table>। আমি আশা করি এটি আমার সিএসএসকে প্রভাবিত করছে না।

Comments

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

— টাস

আপনি যদি টেবিলের ট্রের

— অ্যালেনসি

ভবিষ্যতে অনুসন্ধানকারীদের @ নাথান মনসোসের জবাবটি নীচে স্ক্রোল করতে উত্সাহিত করার জন্য একটি নোট, নীচে - সম্ভবত এটিই আপনি সমাধান খুঁজছেন

— হেনরি

Answer 1

আমার আগেও এরকম সমস্যা ছিল। আমি মনে করি trনা সরাসরি সীমান্ত স্টাইলিং নিতে পারে। আমার কাজটি tdসারিবদ্ধভাবে স্টাইল করা ছিল :

<tr class="border_bottom">

সিএসএস:

tr.border_bottom td {
  border-bottom:1pt solid black;
}

Comments

নোট করুন যে এই সমাধানটি ব্যবহার করে আপনার সম্ভবত টিডির সীমানায় ফাঁক থাকবে। সিমোনসারেস্কার উত্তর এটির যত্ন নেয় তবে সচেতন হন যে এটি বিন্দুযুক্ত বা

— ড্যাশযুক্ত

আপনি cellspacing="0"এট্রিবিউট হিসাবে যুক্ত করে এটি প্রতিকার করতে পারেন <table>( এই প্রশ্নটি দেখুন )। তবে কীভাবে বিন্দুযুক্ত বা ড্যাশযুক্ত সীমানার সাথে এটি দেখতে পাবেন তা জানেন না।

— স্টিফান ভ্যান ড্যান আকার

trভেঙে পড়া সীমান্ত মডেলটিতে সীমানা স্টাইলিং নিতে পারে। @ সংগ্রাম, এমন একটি উত্তর গ্রহণ করার বিষয়ে বিবেচনা করুন যা এই উত্তরটির পরিবর্তে অ্যাকাউন্টটিকে গ্রহণ করে, না?

— রবার্ট সিমার

টেবিল কক্ষগুলির মধ্যে প্যাডিং থাকলে এটি কাজ করবে না। যদি প্যাডিং থাকে তবে সীমানাটি দৃশ্যমানভাবে বিভক্ত হয়ে যাবে টুকরো টুকরো টুকরো টুকরো।

— টিমোথি গঞ্জালেজ

এবং আপনার টেবিলটির জন্য এই স্টাইলটি প্রয়োজন <টেবিল শৈলী = "সীমান্ত-পতন: পতন">

— ওগুজ

Answer 2

যোগ border-collapse:collapseআপনার টেবিল নিয়মের:

table { 
    border-collapse: collapse; 
}

লিংক

Comments

এটি নিজে কাজ করে না। আপনি এখনও সারিটি স্টাইল করতে পারবেন না, তবে আপনি ঘরগুলি স্টাইল করতে পারবেন।

— রেনান

আপনি ভুল, @ রেনান ভাঙ্গা সীমানা মডেল হ'ল সারি সীমানাকে স্টাইলযোগ্য করে তোলে। সিএসএস সেকটেন ১ 17..6 অনুসারে : পৃথক সীমান্তের মডেলটিতে "সারি, [...] সীমানা থাকতে পারে না (অর্থাত্ ব্যবহারকারী এজেন্টদের অবশ্যই এই উপাদানগুলির সীমান্তের বৈশিষ্ট্যগুলি উপেক্ষা করতে হবে)"। "ভেঙে পড়া সীমান্তের মডেলটিতে, কোনও কক্ষ, সারি [এবং] সারি গোষ্ঠীর সমস্ত অংশ বা চারপাশের সীমানা নির্দিষ্ট করা সম্ভব [...]" এবং উপায় দ্বারা: এটি আমার ব্রাউজারে কাজ করে (ক্রোমিয়াম 37)।

— রবার্ট সিমার

আমি মনে করি কিছু লোক হয়তো বিভ্রান্ত হয়ে পড়ছে (যেমন আমি করেছি) এবং লক্ষ্য করছেন না যে সারি সারি নয়, সীমানা-ধসের স্টাইলটি টেবিলে সেট করা দরকার।

— Porlune

দেখে মনে হচ্ছে ক্রোমের এই বৈশিষ্ট্যটি নেই, যদিও এটি সীমান্ত-পতন বৈশিষ্ট্যগুলির অন্যদের সমর্থন করে।

— লিকুন সান

Answer 3

border-collapse:collapseটেবিল এবং border-bottom: 1pt solid black;ট্রিতে ব্যবহার করুন

Comments

সীমান্ত ভেঙে গেলেও সীমানা নির্ধারণ করা অকেজো use আপনাকে এটি টিআর এর টিডিতে সেট করতে হবে

— রাদু সিমিনেস্কু

@ রাদুসিমিওনেস্কু ভুল, এটি trসীমানা ভেঙে যাওয়ার সাথে পুরোপুরি ঠিকঠাক কাজ করে ।

— স্টিফন

এফএফ 45.0.1 এ কোনও প্রভাব নেই।

— imrek

Answer 4

ব্যবহার

border-collapse:collapse নাথন যেমন লিখেছেন এবং আপনাকে সেট করা দরকার

td { border-bottom: 1px solid #000; }

Comments

যেভাবে আমি এটিও করব! টিডিতে সীমানা যুক্ত করুন এবং টেবিলে সীমানা-পতন ব্যবহার করুন

— সায়ান

Answer 5

এখানে অনেকগুলি অসম্পূর্ণ উত্তর রয়েছে। যেহেতু আপনি trট্যাগ করার জন্য কোনও সীমানা প্রয়োগ করতে পারবেন না , আপনাকে এটি ট্যাগ tdবা এটির thমতো ট্যাগগুলিতে প্রয়োগ করতে হবে :

td {
  border-bottom: 1pt solid black;
}

এটি করার ফলে প্রত্যেকের মধ্যে একটি ছোট জায়গা ছেড়ে যাবে td, যা আপনি চাইলে সীমান্তটি প্রদর্শিত হতে চাইলে সম্ভবত এটি কাম্য নয় tr। "শূন্যস্থান পূরণ করতে" যাতে কথা বলার জন্য আপনাকে উপাদানটির border-collapseবৈশিষ্ট্যটি ব্যবহার করতে হবে tableএবং এর মানটি সেট করতে হবে collapseযেমন:

table {
  border-collapse: collapse;
}

Answer 6

ব্যবহার

table{border-collapse:collapse}
tr{border-top:thin solid}

CSS বৈশিষ্ট্যগুলির সাথে "পাতলা শক্ত" প্রতিস্থাপন করুন।

Answer 7

সারিটি একটি ব্লক হিসাবে প্রদর্শন করুন।

tr {
    display: block;
    border-bottom: 1px solid #000;
}

এবং বিকল্প রঙগুলি সহজভাবে প্রদর্শন করতে:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Comments

না একটি ভাল ধারণা সেটেdisplay: blockজন্যtrএর। ব্যবহারেরtr td { border-bottom: ... }বিজ্ঞাপনtr.oddrow td { border-bottom: ... }পরিবর্তে

— vladr

প্রদর্শন ব্লক টেবিল layout.border-পতন ধ্বংস পারে: টেবিল নিজেই পতন definitly সবচেয়ে ভালো সমাধান হয়

— N4ppeL

Answer 8

আপনি box-shadowকোনও trউপাদানটির সীমানা জাল করতে সম্পত্তিটি ব্যবহার করতে পারেন । box-shadowপুরুত্ব সামঞ্জস্য করতে (নীচে 2px হিসাবে উপস্থাপিত) এর Y অবস্থানটি সামঞ্জস্য করুন ।

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Answer 9

আমি যোগ করার চেষ্টা করেছি

    table {
      border-collapse: collapse;
    }   

পাশাপাশি

    tr {
      bottom-border: 2pt solid #color;
    }

এবং তারপরে কী কাজ করেছে তা দেখতে সীমান্ত-ধসের মন্তব্য করে। নীচে-সীমান্তের সম্পত্তি সহ কেবলমাত্র টিআর সিলেক্টর আমার পক্ষে কাজ করেছে!

কোনও সীমান্ত সিএসএস নেই।

কোনও সীমান্তের ফটো লাইভ নেই

সিএসএস বর্ডার প্রাক্তন

বর্ডার ফটো লাইভ সহ সারণী

Answer 10

আমি এই পদ্ধতিটি ব্যবহার করার সময় খুঁজে পেয়েছি যে টিডি উপাদানগুলির মধ্যে স্থান সীমান্তে একটি ফাঁক তৈরি করেছিল, তবে কোনও ভয় নেই ...

এর চারপাশে একটি উপায়:

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

সিএসএস সহ:

td.end{
    border:2px solid black;
}

Answer 11

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

আপনি পুরো সারিতে একই কাজ করতে পারেন।

নেই border-bottom-style, border-top-style, border-left-style, border-right-style। বা সহজভাবেborder-style যে একবারে চারটি সীমানায় প্রযোজ্য।

আপনি দেখতে পারেন (এবং নিজে চেষ্টা করে অনলাইন) আরো বিস্তারিত জানার জন্য এখানে

Answer 12

বেশ কয়েকটি আকর্ষণীয় উত্তর। যেহেতু আপনি কেবল সীমানা নীচে (বা উপরে) চান এখানে আরও দুটি রয়েছে। ধরে নিচ্ছি আপনি নীল বর্ডার 3px পুরু চান। স্টাইল বিভাগে আপনি যুক্ত করতে পারেন

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

টেবিল কোড হয়

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

Answer 13

এর আর একটি সমাধান border-spacingসম্পত্তি:

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

Answer 14

সিএসএস সীমানা নীচে নেই:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

Answer 15

আপনি কোনও ত্রি উপাদানটিতে সীমানা রাখতে পারবেন না। এটি ফায়ারফক্স এবং আইই 11 এ আমার জন্য কাজ করেছে:

<td style='border-bottom:1pt solid black'>

Comments

আপনি একটি ট্রিতে একটি সীমানা রাখতে পারবেন না। এটি পরিষ্কার করার জন্য সম্পাদিত উত্তর।

— ডেকো

এটি সহজ এবং সুনির্দিষ্ট উত্তর।

— জেমসসি

Answer 16

এইচটিএমএল

<tr class="bottom-border">
</tr>

সিএসএস

tr.bottom-border {
  border-bottom: 1px solid #222;
}

Comments

সীমানা-পতন ছাড়া অকেজো: পতন;

— এম 1 সিআরডি