How to fix the responsivvness of this calendar table on Bootstrap 5.2?

Question

Here the html code, Also if anyone could, How Could I put a Rounded Border on these tables using bootstrap? I will be really greatful if someone could help me on this situation. I am over typing but the stackoverflow didnt allow me to ask the quention! /snif

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="/assets/css/calendar.css" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-2 bg-secondary">
          <div class="dropdown">
            <button
              class="btn btn-primary dropdown-toggle"
              type="button"
              id="dropdown"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdown">
              <li><a class="dropdown-item" href="#">Dropdown item</a></li>
              <li><a class="dropdown-item" href="#">Dropdown item</a></li>
              <li><a class="dropdown-item" href="#">Dropdown item</a></li>
            </ul>
          </div>
        </div>
        <div class="col-md-10 col-xs-12">
          <div class="row">
            <div class="col-12 col-sm-12 bg-primary">
              <!-- Código Calendar -->
              <h2>Calendar</h2>
              <table class="table text-center table-hover table-bordered table-responsive">
                <thead>
                  <tr class="bg-success">
                    <th class="col-1" scope="col">#</th>
                    <th class="col-1" scope="col">Monday</th>
                    <th class="col-1" scope="col">Tuesday</th>
                    <th class="col-1" scope="col">Wednesday</th>
                    <th class="col-1" scope="col">Thursday</th>
                    <th class="col-1" scope="col">Friday</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">09:00</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th scope="row">09:30</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th scope="row">10:00</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                </tbody>
              </table>
              <!-- Código Calendar -->
            </div>
            <div class="col-12 col-sm-12 bg-success">
              <h2>History</h2>
              <table class="table table-dark table-hover">
                <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>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
      integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js"
      integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Here is the image of the problem of the table that doesn't fit on the container! code img

Please [edit] the question and tell us exactly what you want to do, because the title and the body of the question do not match. Stick to a single question at a time. — , May 24 '22 at 17:28
Please embed your image properly. You can use preview for that. — Cornelius Roemer, May 26 '22 at 00:45

score 1 · Answer 1 · answered May 23 '22 at 23:27

It looks like you have read the documentation, but didn't understand how to use .table-responsive correctly. If you scroll down, you can see that you need to wrap your table in a .table-responsive like this:

<div class="table-responsive">
    <table class="table text-center table-hover table-bordered">
        <!-- Content -->
    </table>
</div>

As for adding rounded borders, I found this answer that should help. It seems like the problem you will have is bootstrap uses 'border-collapse:collapse' which interferes with the rounded corners.

How to fix the responsivvness of this calendar table on Bootstrap 5.2?

1 Answers1