CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
GPA
GPA

Reputation: 111

Bootstrap table prevent from creating horizontal scrollbar

I try to create table with 2 columns and for the mobile view I want to hide horizontal scrollbar and just push the content in a columns down but under 500px it keeps creating the horizontal scrollbar. I use bootstrap 4 and I the classes like table-responsive. I tried to setup manually margin and padding and also I was trying to hide scrollbar but nothing works.

.container {
    position: relative;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

table {
    border-top: hidden;
}

.table td,
.table th {
  width: 50%;
  padding-left: 10px;
}

td,
th[scope=row] {
    color: #808080;
}

.odd-section {
  width: 100%;
  background: #fff;
  padding: 3em 0em;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
  </head>
  <body>

    <!-- TABLE -->
    <div class="odd-section">
      <div class="container">
        <table class="table table-responsive">
          <thead>
            <tr>
              <th class="" scope="col">Lorem Lorem</th>
              <th scope="col">Result</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.This will also work on secret lots.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

  </body>
</html>

Upvotes: 2

Views: 6865

Answers (1)

Vivek Gondhiya
Vivek Gondhiya

Reputation: 129

Adding float:left, word-break: break-word; along with width: 50% to .table td, .table th will give the result.

.container {
    position: relative;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

table {
    border-top: hidden;
}

.table td,
.table th {
  width: 50%;
  float: left;
  word-break: break-word;
  padding-left: 10px;
}

td,
th[scope=row] {
    color: #808080;
}

.odd-section {
  width: 100%;
  background: #fff;
  padding: 3em 0em;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
  </head>
  <body>

    <!-- TABLE -->
    <div class="odd-section">
      <div class="container">
        <table class="table table-responsive">
          <thead>
            <tr>
              <th class="" scope="col">Lorem Lorem</th>
              <th scope="col">Result</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.This will also work on secret lots.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

  </body>
</html>

Upvotes: 1

Related Questions