স্ট্রিপ / সীমানা ছাড়াই বুটস্ট্র্যাপ টেবিল

Question

বুটস্ট্র্যাপ ব্যবহার করার সময় আমি কোনও সিএসএস সমস্যা নিয়ে আটকে আছি। আমি কৌণিক UI.bootstrap (যা সমস্যার অংশ হতে পারে) এর সাথে কৌনিক জেএসও ব্যবহার করছি।

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

তবে মনে হয় যে আমি কোনও টেবিলে সীমান্ত না দেখানোর জন্য বিশেষভাবে বললেও, তা বাধ্য করা হয়:

এইচটিএমএল:

<table class='table borderless'>

সিএসএস:

.borderless table {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

সুতরাং এখানে, আমি যা চাই তা কেবল অভ্যন্তরের সীমানা।

Comments

আপনি বুটস্ট্র্যাপের কোন সংস্করণ ব্যবহার করছেন?

— মার্টিন বিন

আমি বুটস্ট্র্যাপ ২.৩.১ ব্যবহার করছি

— রোমেন

বুটস্ট্র্যাপ 4 সহ: সীমান্ত টিআর টিডি, সীমান্ত

— ত্রি ত্র

Answer 1

সীমানা স্টাইলিং সেট করা আছে td উপাদানগুলিতে ।

এইচটিএমএল:

<table class='table borderless'>

CSS:

.borderless td, .borderless th {
    border: none;
}

আপডেট: যেহেতু বুটস্ট্র্যাপ ৪.১ আপনি ব্যবহার করতে পারেন.table-borderless সরাতে করতে পারেন।

https://getbootstrap.com/docs/4.1/content/tables/#borderless-table

Comments

দ্রষ্টব্য: .borderless thআপনারও যোগ করা উচিত , যেমন বুটস্ট্র্যাপ স্টাইলিংও প্রযোজ্য <th>।

— বেনিয়ামিন

আপনি যদি বুটস্ট্র্যাপ 3 ব্যবহার করেন তবে আমার উত্তরটি পরীক্ষা করুন ।

— ডেভিড পাস্তোর

আমাকে সীমানা যুক্ত করতে হয়েছিল: গুরুত্বপূর্ণ নয়; এটা কাজ করতে.

— শ্রীকান্ত জীবন

@ শ্রীকান্তজিভা .. বা আপনি কেবল লাইনে সিএসএস স্টাইল যুক্ত করুন style=, বা এটি একটি কাস্টমাইজড ফাইলে রেখেছেন এবং বুটস্ট্র্যাপ ডিফল্ট স্টাইলকে ওভাররাইড করতে বুটস্ট্র্যাপ সিএসএস ফাইলের চেয়ে এটি পরে লোড হয়েছে কিনা তা নিশ্চিত করুন । সিএসএস আদেশ সহ লোড হয়; পরেরটি প্রাক্তনটিকে ওভাররাইট করে, আরও সুনির্দিষ্ট আরও সাধারণকে ওভাররাইট করে।

— ওয়েস্টার্নগান

বুস্ট্র্যাপের জন্য> <table class='table table-borderless'>নীচে সর্বোচ্চ 4.1 ব্যবহার করুন

— সমাধি

Answer 2

বুটস্ট্র্যাপ ৩.২.০ ব্যবহার করে আমার ব্রেট হেন্ডারসন সলিউশন (সীমানা সর্বদা সেখানে ছিল) নিয়ে সমস্যা ছিল, তাই আমি এটিকে উন্নত করেছি:

এইচটিএমএল

<table class="table table-borderless">

সিএসএস

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}

Comments

thদেহে-উপাদানটি ভুলে যাবেন না: .borderless tbody tr th( উদাহরণগুলিতে ব্যবহৃত হিসাবে )

— উইটস

@ ডেভিডপাস্টোর যদি এটি কেবল টেবিলগুলির জন্য হয় তবে সম্ভবত এটির সাথে উপসর্গ করুন .table-, যেমন বুটস্ট্র্যাপ 3 অন্যান্য টেবিল সম্পর্কিত ক্লাসগুলির জন্য করে (উদাহরণস্বরূপ table-striped, ইত্যাদি)। নাম হবে তাই table-borderless।

— আরোগাচেভ

V4.0.0-alpha.2 এর জন্য কাজ করে। ধন্যবাদ!

— ডোমিনোফো

আমি .table-borderless,এই স্টাইলের বিশদকরণের শুরুতে যোগ না করা পর্যন্ত আমি এখনও টেবিলের নীচে বর্ডার পাচ্ছিলাম ।

— ক্রিস্টোফার কিং

আমি table-borderlessএই ডকটিতে getbootstrap.com/docs/3.3/css/#tables দেখতে পাচ্ছি না । কোথা থেকে এলো?

— অরূপ রক্ষিত

Answer 3

বাকিগুলির মতো, তবে আরও নির্দিষ্ট:

    table.borderless td,table.borderless th{
     border: none !important;
}

Comments

.Table.borderless

— পছন্দ

@ সাম জোন্স - এটি কি পুরো টেবিলকে প্রভাবিত করে? আমি কিছু সারি নীচের সীমানা পেতে চাই। আমি বর্ডার-টপ চলে যেতে চাই।

— মার্কোজেইন

! গুরুত্বপূর্ণ খুব গুরুত্বপূর্ণ

— ফ্লিকার

Answer 4

.tableআপনার <table>ট্যাগটিতে ক্লাস যুক্ত করবেন না । টেবিলগুলির বুটস্ট্র্যাপ ডক্স থেকে :

বেসিক স্টাইলিংয়ের জন্য — হালকা প্যাডিং এবং কেবল অনুভূমিক বিভাজকগুলিকে যে কোনওটিতে বেস ক্লাস যুক্ত .tableকরুন <table>। এটি দুর্দান্ত রিডানড্যান্ট মনে হতে পারে তবে ক্যালেন্ডার এবং তারিখ পিকারের মতো অন্যান্য প্লাগইনগুলির জন্য টেবিলগুলির ব্যাপক ব্যবহারের কারণে আমরা আমাদের কাস্টম টেবিল শৈলীগুলি আলাদা করতে বেছে নিয়েছি।

Comments

এমনকি এটির মতো: এইচটিএমএল: <টেবিল শ্রেণি = 'সীমান্তহীন'> সিএসএস: সীমান্তহীন {সীমানা: কিছুই নয়; } এটি কাজ করে না।

— রোমেন

আমি তখন Chrome- এ ওয়েব ইন্সপেক্টর ব্যবহার করার পরামর্শ দিয়েছি এবং যেখানে কোনও সীমানা প্রয়োগ করা হচ্ছে তা দেখার জন্য, যেমন তারিখ-পিক্সার ইত্যাদির মতো অন্যান্য উপাদানগুলির সাথে আন্তঃব্যবহারের জন্য বুটস্ট্র্যাপ ব্যবহার করার সময় ডিফল্টরূপে সারণীগুলির সীমানা থাকে না

— মার্টিন বিন

এটি দুর্দান্ত কাজ করেছে, আমি কেবল 'টেবিল-সংশ্লেষিত' এবং অন্যান্য রূপগুলি 'টেবিল' শ্রেণি ছাড়াই ব্যবহার করছি এবং সীমানা থেকে মুক্তি পেয়েছি। দস্তাবেজগুলি আমাকে কিছুটা ছুঁড়ে মারার মতো দুর্দান্ত টিপ।

— ক্রিসম্যাকপ

Answer 5

বুটস্ট্র্যাপ v4.1 যেহেতু table-borderlessআপনি আপনার টেবিলটিতে যুক্ত করতে পারেন , অফিসিয়াল ডকুমেন্টেশন দেখুন :

<table class='table table-borderless'>

Answer 6

আমার সিএসএসে:

.borderless tr td {
    border: none !important;
    padding: 0px !important;
}

আমার নির্দেশে:

<table class='table borderless'>
    <tr class='borderless' ....>

আমি টিডি এলিমেন্টের জন্য 'সীমান্তহীন' রাখিনি।

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

Answer 7

আমি ডেভিড পাস্তোরের মতো বুটস্ট্র্যাপ টেবিলের শৈলীগুলি প্রসারিত করেছি, তবে সেই পদ্ধতিতে শৈলীগুলি সমস্ত শিশু টেবিলগুলিতেও প্রয়োগ করা হয়, এবং সেগুলি ফুটারে প্রয়োগ হয় না।

আরও ভাল সমাধান হ'ল মূল বুটস্ট্র্যাপ টেবিল শৈলীগুলি অনুকরণ করা হবে তবে আপনার নতুন শ্রেণীর সাথে:

.table-borderless>thead>tr>th
.table-borderless>thead>tr>td
.table-borderless>tbody>tr>th
.table-borderless>tbody>tr>td
.table-borderless>tfoot>tr>th
.table-borderless>tfoot>tr>td {
    border: none;
}

তারপরে আপনি যখন <table class='table table-borderless'>ক্লাসের সাথে সুনির্দিষ্ট সারণীটি ব্যবহার করবেন তখন গাছের কোনও টেবিল নয়।

Answer 8

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

<table class='borderless'>

সিএসএস

.borderless {
 border:none;
}

দ্রষ্টব্য: আপনি আগে যা করছেন তা কাজ করছে না কারণ আপনার সিএসএস কোডটি আপনার। সীমান্তহীন টেবিলের মধ্যে একটি টেবিলকে লক্ষ্য করেছিল (যা সম্ভবত উপস্থিত ছিল না)

Answer 9

আমি জানি এটি একটি পুরানো থ্রেড এবং আপনি একটি উত্তর বেছে নিয়েছেন, তবে আমি ভেবেছিলাম যে এটি বর্তমানে পোস্ট করা অন্য কারও জন্য এটি প্রাসঙ্গিক হিসাবে পোস্ট করব।

নতুন সিএসএস বিধি তৈরি করার কোনও কারণ নেই, কেবলমাত্র বর্তমান বিধিগুলি পূর্বাবস্থায় ফিরিয়ে আনুন এবং সীমানা অদৃশ্য হয়ে যাবে।

    .table> tbody> TR> ম,
    .table> tbody> tr> td
        সীমানা শীর্ষ: 0;
    }

এগিয়ে যাচ্ছে, স্টাইলযুক্ত কিছু

    .table

কোন সীমানা প্রদর্শন করবে না।

Answer 10

border-বুস্ট্র্যাপ 4 থেকে ক্লাসটি ব্যবহার করুন

<td class="border-0"></td>

অথবা

<table class='table border-0'></table>

আপনি যে সর্বশেষ পরিবর্তনটি করতে চান তা দিয়ে ক্লাস ইনপুটটি শেষ করার বিষয়টি নিশ্চিত হন।

Answer 11

এই আমার জন্য কাজ করে।

<td style="border-top: none;">;

কীটি হ'ল এটিতে সীমানা শীর্ষকে যুক্ত করতে হবে <td>

Comments

ইনলাইন সিএসএস অ্যাট্রিবিউটগুলি খারাপ অভ্যাস হিসাবে বিবেচিত হয় ।

— মার্টিন ভ্যান ড্রিল

Answer 12

আমি এখানে খেলা দেরি করে ফেলেছি কিন্তু FWIW: যোগ .table-borderedএকটি থেকে .tableমাত্র যে কক্ষে একটি পূর্ণ সীমান্ত যোগ করে একটি সীমানা টেবিল গোপন, যদিও না বুঝে।

কিন্তু সরানো .table-borderedএখনও নিয়মের লাইন ছেড়ে যায়। এটি একটি শব্দার্থক সমস্যা, তবে BS3 + নামকরণের সাথে তাল মিলিয়ে আমি এই সেটটিকে ওভাররাইড ব্যবহার করেছি:

.table.table-unruled>tbody>tr>td,
.table.table-unruled>tbody>tr>th {
  border-top: 0 none transparent;
  border-bottom: 0 none transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-5">
      .table
      <table class="table">
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered">
        .table .table-bordered
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-5">
      <table class="table table-unruled">
        .table .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered table-unruled">
        .table .table-bordered .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>

Answer 13

এর hiddenপরিবর্তে ব্যবহার করুন none:

.hide-bottom {
    border-bottom-style: hidden;
}

Answer 14

বেশিরভাগ উদাহরণ খুব সুনির্দিষ্ট এবং / বা ফুলেছে বলে মনে হয়।

বুটস্ট্র্যাপ 4.0.০.০ ব্যবহার করে আমার ছাঁটা সমাধানটি এখানে ছিল (৪.১ এর মধ্যে রয়েছে .table-borderlessতবে এখনও আলফা) ...

.table-borderless th{border:0;}
.table-borderless td{border:0;}

অনেক প্রস্তাবিত সমাধানের মতো, তবে ন্যূনতম বাইট 😉 😉

দ্রষ্টব্য: আমি এখানেই শেষ হয়েছিল কারণ আমি BS4.1 রেফারেন্সগুলি দেখছিলাম এবং .table-borderlessআমার 4.0 উত্সের সাথে কেন কাজ করছে না তা বুঝতে পারি না (যেমন: অপারেটরের ত্রুটি, ডু) 💩

Comments

সংশোধন: ৪.১ আলফা নয়। ধারণা ছিল যে, যেহেতু আমি যে সংস্করণ ব্যবহার করা হয় নি 🤣 ছিল

— Mavelo

Answer 15

কিছু ক্ষেত্রে, একটিকে অবশ্যই টেবিল শ্রেণিতে সীমানা-ব্যবধান ব্যবহার করতে হবে, যেমন:

সীমানা-ব্যবধান: 0! গুরুত্বপূর্ণ;

Answer 16

এনপিএম বা সিডিএন লিঙ্কের সাহায্যে বুটস্ট্র্যাপ ইনস্টল করুন

<table class="table table-borderless">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
  </tr>
  <tr>
  <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
 </tbody>
</table>

এই লিঙ্কটি সহ রেফারেন্স পেতে