<!--MOBILE RESPONSIVE TABLE DOUBLE RED BORDER-->
<style>
.table-full {
  width: 100%;
  border-collapse: collapse;
  border: 3px double red; /* পুরো টেবিলের ডাবল লাইন লাল বর্ডার */
}
.table-full th,
.table-full td {
  padding: 10px 12px;
  border: 3px double red; /* প্রতিটি সেলের ডাবল লাইন লাল বর্ডার */
  text-align: left;
  font-size: 14px;
}
.table-full th {
  background: #f7f7f7;
  font-weight: 600;
}
</style>
<table class="table-full">
  <thead>
    <tr>
      <th>Item</th>
      <th>Html</th>
      <th>Price</th>
      <th>Stock</th>
      <th>Ratting</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.</td>
      <td>Blogger</td>
      <td>$ 5</td>
      <td>1</td>
      <td>5.00</td>
    </tr>
    <tr>
      <td>2.</td>
      <td>WordPress</td>
      <td>$ 5</td>
      <td>1</td>
      <td>5.00</td>
    </tr>
  </tbody>

Table No. 2.

Black visible Border Under scroll Table

Table No. 3.

``````````````````end

<!--Horizontal scroll responsive table with BLACK visible borders-->

<style>
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  border-radius: 6px;
}
.table-responsive table {
  width: 100%;
  border-collapse: collapse; /* সঠিকভাবে সেল বর্ডার মিলিয়ে দেবে */
  border: 2px solid #000000; /* টেবিলের বাইরের কালো বর্ডার */
  min-width: 700px;
}
.table-responsive th,
.table-responsive td {
  padding: 10px 12px;
  border: 1px solid #000000; /* প্রতিটি সেলের কালো বর্ডার */
  text-align: left;
  font-size: 14px;
}
.table-responsive th {
  background: #f7f7f7;
  font-weight: 600;
}
</style>
<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Nam</th>
        <th>Price</th>
        <th>Stock</th>
        <th>Ratting</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mobile</td>
        <td>Max</td>
        <td>$ 200</td>
        <td>9</td>
        <td>4.3</td>
      </tr>
      <tr>
        <td>Laptop</td>
        <td>Max</td>
        <td>$ 500</td>
        <td>6</td>
        <td>4.7</td>
      </tr>
    </tbody>
  </table></div>

Table No. 4.

<!--COPY-PASTE: Hide low-priority columns on small screens-->
<style>
.priority-table {
  width: 100%;
  border-collapse: collapse;
}
.priority-table th, .priority-table td {
  padding: 10px;
  border: 1px solid #ddd;
}
@media (max-width: 720px) {
  /* hide the 4th column (stock) and 5th column (rating) on small screens */
  .priority-table th:nth-child(4),
  .priority-table td:nth-child(4),
  .priority-table th:nth-child(5),
  .priority-table td:nth-child(5) {
    display: none;
  }
}
</style>
<table class="priority-table">
  <thead>
    <tr>
      <th>আইটেম</th>
      <th>বর্ণনা</th>
      <th>দাম</th>
      <th>স্টক</th>
      <th>রেটিং</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A-1</td>
      <td>T-Shirt</td>
      <td>৳ 450</td>
      <td>15</td>
      <td>4.3</td>
    </tr>
    <tr>
      <td>B-2</td>
      <td>Jaket</td>
      <td>৳ 980</td>
      <td>22</td>
      <td>4.0</td>
    </tr>
  </tbody>
</table>