একটি HTML টেবিল সারিতে সীমানা দেওয়া, <tr>

Question

<tr>পৃথক কক্ষগুলিকে সীমানা দেওয়ার পরিবর্তে একসাথে কোনও টেবিলের সারিটি সীমানা করা কি সম্ভব , <td>যেমন,

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

এটি প্রদত্ত চারপাশে সীমানা দেয় <tr>তবে এর জন্য পৃথক কক্ষের চারপাশে একটি সীমানা প্রয়োজন।

আমরা কি <tr>কেবল একবারে সীমানা দিতে পারি ?

S jsFizz

Answer 1

আপনি borderকোনও trউপাদানের উপর বৈশিষ্ট্য সেট করতে পারেন তবে সিএসএস ২.১ স্পেসিফিকেশন অনুসারে, এই জাতীয় বৈশিষ্ট্যগুলির বিচ্ছিন্ন সীমানা মডেলটিতে কোনও প্রভাব থাকে না, যা ব্রাউজারগুলিতে ডিফল্ট হতে থাকে। রেফ .: 17.6.1 পৃথক বর্ডার মডেল । ( প্রাথমিক মান border-collapseহয় separateসিএসএস 2.1 অনুযায়ী, এবং কিছু ব্রাউজার এছাড়াও হিসাবে সেট ডিফল্ট মান জন্য table। নেট প্রভাব যাহাই হউক না কেন আপনি প্রায় সব ব্রাউজারে যদি না আপনি স্পষ্টভাবে specifi উপর সীমান্ত আলাদা হয়ে যায় collapse।)

সুতরাং, আপনার ভাঙ্গা সীমা ব্যবহার করতে হবে to উদাহরণ:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

Comments

@ রবার্ট সিমার এটি সত্য যে এটি সারিগুলির চারপাশে একটি সীমানা রাখে, এটির জন্য "সীমান্ত-পতন: পতন" প্রয়োজন। এই পদ্ধতিতে সেলপ্যাডিংয়ের বৈশিষ্ট্যটি ব্যবহার করে কলামগুলি ফাঁক করা যায় না। নীচে সিএসএম্কেলভির উত্তরে ব্যবহৃত রূপরেখার সম্পত্তিটি টেবিলের চেহারাতে আরও বেশি নিয়ন্ত্রণের জন্য সরবরাহ করে এবং ঠিক একই লক্ষ্য অর্জন করে। এটি গ্রহণযোগ্য উত্তর হওয়া উচিত নয় কারণ এটি লক্ষ্য অর্জনে অকারণে কার্যকারিতা সীমাবদ্ধ করে।

— আমি_

Answer 2

একেবারে! শুধু ব্যবহার

<tr style="outline: thin solid">

আপনি পছন্দ করেন যা সারিতে। এখানে একটি ঝাঁকুনি ।

অবশ্যই, লোকেরা যেমন বলেছে, আপনি ইচ্ছুক হলে এটি কোনও আইডি, বা শ্রেণীর মাধ্যমে বা অন্য কোনও উপায়ে করতে পারেন।

Comments

<tr> এমন একটি ধারক হওয়া উচিত যা উপাদানটিকে তার স্টাইলের মাধ্যমে ফর্ম্যাট করা শব্দার্থবিজ্ঞানের দিক থেকে সঠিক নয়, এমনকি এটি কার্যকর হলেও।

— Itay গাল

গুগল ক্রোম এবং ইন্টারনেট এক্সপ্লোরার একটি প্রায় একটি সীমানা দেখায় <tr>কিন্তু মজিলা ফায়ার ফক্স সীমানা প্রদর্শন করে না।

— ক্ষুদ্র

এর outlineপরিবর্তে ব্যবহার করার চেষ্টা করুন border। এটি সামঞ্জস্যতা ঠিক করা উচিত। আমার কাছে কেবল ক্রোম এটিএম রয়েছে, তাই আমি এটি পরীক্ষা করতে পারি না।

— টেন্ডার্ক্ক

রূপরেখা সীমানা নয়।

— জুক্কা কে। কোরপেলা

পুরোপুরি বোধগম্য। এই সাইটটি মানুষকে সেরা উত্তর দেওয়ার বিষয়ে, আমার জবাব নয় :)

— টেন্ডার্ক্ক

Answer 3

হ্যাঁ. আমি আমার উত্তর ডেমো আপডেট করেছি

table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

table td:first-child {
     border-left: thin solid;
}

table td:last-child {
     border-right: thin solid;
}

আপনি যদি কেবল একটি স্টাইল করতে চান তবে <tr>আপনি এটি ক্লাসের সাথে করতে পারেন: দ্বিতীয় ডেমো

Comments

দেখে মনে হচ্ছে ইন্টারনেট এক্সপ্লোরার অপছন্দ করে last-child(এটি সমর্থন করে বলে মনে হচ্ছে না)।

— ক্ষুদ্র

@ ছোট কোন আইই সংস্করণটি আপনি সমর্থন করতে চান? সংস্করণ 9+ প্রথম শিশু এবং শেষ সন্তানের সমর্থন করে।

— Itay গাল

এটি ইন্টারনেট এক্সপ্লোরার 8 তবে এটি নিয়ে খুব বেশি উদ্বেগের দরকার নেই :)

— ক্ষুদ্র

আপনি <tr> স্টাইল করছেন না, আপনি <td> স্টাইল করছেন।

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

Answer 4

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

tr.border{
    outline: thin solid;
}

এবং এটি ব্যবহার করুন:

<tr class="border">...</tr>

Answer 5

আপনি একটি সীমানার বিকল্প হিসাবে একটি ট্রিল উপাদানতে বাক্স-ছায়া সম্পত্তি ব্যবহার করতে পারেন। প্লাস হিসাবে, একই উপাদানগুলির যে কোনও সীমানা-ব্যাসার্ধের সম্পত্তি বাক্সের ছায়ায়ও প্রযোজ্য।

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);

Comments

এটি স্টাইলিংয়ের চেয়ে অনেক বেশি নিয়ন্ত্রণ সরবরাহ outlineকরে। উচ্চতর উত্তর হওয়া উচিত।

— জ্যাকব স্ট্যাম

Answer 6

বাম ঘর:

style="border-style:solid;border-width: 1px 0px 1px 1px;"

মিডড সেল (গুলি):

style="border-style:solid;border-width: 1px 0px 1px 0px;"

ডান ঘর:

style="border-style:solid;border-width: 1px 1px 1px 0px;"

Answer 7

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Comments

আপনি কি আপনার উত্তরে মন্তব্য যুক্ত করতে পারেন এবং কী পরিবর্তন করেছেন তা ব্যাখ্যা করতে পারেন?

— ফ্রেণিস

Answer 8

সীমানা-ব্যবধান যুক্ত করা: 0 মিমি 0.5 মিমি; কোষগুলির মধ্যে কোনও স্থান না রেখে তার নীচে প্রতিটি কক্ষের (টিডি, থ) আইটেমের জন্য একটি স্থান তৈরি করে

    table.app-table{
        border-collapse: separate;
        border-spacing: 0rem 0.5rem;
    }
    table.app-table thead tr.border-row the,
    table.app-table tbody tr.border-row td,
    table.app-table tbody tr.border-row th{
        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    table.app-table thead tr.border-row th:first-child,
    table.app-table tbody tr.border-row td:first-child{
        border-left: 1px solid #EAEAEA;
    }

    table.app-table thead tr.border-row th:last-child,
    table.app-table tbody tr.border-row td:last-child{
        border-right: 1px solid #EAEAEA;
    }

Answer 9

দীর্ঘকাল এটির সাথে লড়াই করার পরে আমি এই সিদ্ধান্তে পৌঁছেছি যে দর্শনীয়ভাবে সহজ উত্তরটি হ'ল টেবিলের প্রতিটি সারিটি একই সংখ্যক কোষে প্যাড করার জন্য খালি ঘরগুলি দিয়ে টেবিলটি পূরণ করা (স্পষ্টতই কলস্পানকে অ্যাকাউন্টে নেওয়া)। কম্পিউটার-উত্পাদিত এইচটিএমএল সহ এটি ব্যবস্থা করা খুব সহজ, এবং জটিল কাজের সাথে লড়াই করা এড়ানো avo চিত্র নিম্নলিখিত:

<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>


<h3>Simple solution, artificially insert empty cells</h3>

<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only<td><td>
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only<td>
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>