Tips for adjusting the table's height and width in a container while also including horizontal and vertical scroll bars in the <tbody> to prevent overflow

Question

Tips for adjusting the table's height and width in a container while also including horizontal and vertical scroll bars in the <tbody> to prevent overflow

Despite adding height and width adjustments in the table tag and setting the overflow properties to 'auto', the table still overflows. Attempting to follow this, it doesn't seem to work with my code. Any assistance in identifying mistakes or missing elements in the code would be greatly appreciated.

<style>
    table {
        max-width: 600px;
        max-height: 400px;
        border-spacing: 0;
        display: block;
    }
    
    tbody {
        overflow-y: auto;
        overflow-x: auto;
    }
    
    th {
        /*display: block;*/
        border: 1px solid #293033;
        position: sticky;
        top: 0;
        text-align: center;
        padding: 8px;
        color: #e9ecef;
        background-color: #1e2324;
        font-weight: 500;
        font-size: 14px;
    }
    
    td {
        background-color: #041230;
        border: 1px solid #293033;
        text-align: center;
        padding: 8px;
        color: #e9ecef;
        min-width: 150px;
        font-size: 13px;
        word-spacing: 2px;
    }
    
    td:nth-child(1) {
        min-width: 50px;
        max-width: 50px;
        font-weight: bold;
        color: #66FCF1;
    }
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resCSS.css">

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>

<div class="container">
    <table class="tablecolor2">
        <!-- class="tablecolor" -->
        <thead>
            <tr>
                <th>#</th>
                <th>Dummy</th>
                <th>dvfdgdg</th>
                <th>fvfdgfd/fdgdg</th>
                <th>Cdumm</th>
                <th>sdfdgds</th>
                <th>Cd</th>
                <th>Ankjfdksf</th>
                <th>jnknk</th>
                <th>fdfdgdfg</th>
            </tr>
        </thead>
        <tbody>
            ... (content continues)
        </tbody>
    </table>
</div>

https://i.sstatic.net/t9XOB.png https://i.sstatic.net/mUExR.png

html css twitter-bootstrap html-table bootstrap-4

Answer 1

Answer №1

Referencing this specific answer provided:

Avoid overflowing the tbody element, rather utilize a parent container such as DIV
Avoid applying the style display: block; directly on a table.

/*QuickReset*/*{margin:0;box-sizing:border-box;}

.tableFixHead          { overflow: auto; }
.tableFixHead thead th { position: sticky; top: 0; }

/* CUSTOM SIZE */
.tableFixHead {
  height: 90vh; /* or whatever */
  min-width: 600px;
}

/* OTHER STYLES */
table { border-spacing: 0; }
th,
td {
  text-align: center;
  padding: 8px;
  color: #e9ecef;
  border: 1px solid #293033;
}
th {
  background-color: #1e2324;
  font-weight: 500;
  font-size: 14px;
}
td {
  min-width: 150px;
  background-color: #041230;
  font-size: 13px;
  word-spacing: 2px;
}
td:first-child {
  min-width: 50px;
  font-weight: bold;
  color: #66FCF1;
}

<div class="container tableFixHead">
  <table class="tablecolor2">
    <thead>
      <tr>
        <th>#</th>
        <th>Dummy</th>
        <th>dvfdgdg</th>
        <th>fvfdgfd/fdgdg</th>
        <th>Cdumm</th>
        <th>sdfdgds</th>
        <th>Cd</th>
        <th>Ankjfdksf</th>
        <th>jnknk</th>
        <th>fdfdgdfg</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <!-- Additional rows removed for brevity -->
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      » Additional rows go here
    </tbody>
  </table>
</div>

Answer 2

Referencing this specific answer provided:

Avoid overflowing the tbody element, rather utilize a parent container such as DIV
Avoid applying the style display: block; directly on a table.

/*QuickReset*/*{margin:0;box-sizing:border-box;}

.tableFixHead          { overflow: auto; }
.tableFixHead thead th { position: sticky; top: 0; }

/* CUSTOM SIZE */
.tableFixHead {
  height: 90vh; /* or whatever */
  min-width: 600px;
}

/* OTHER STYLES */
table { border-spacing: 0; }
th,
td {
  text-align: center;
  padding: 8px;
  color: #e9ecef;
  border: 1px solid #293033;
}
th {
  background-color: #1e2324;
  font-weight: 500;
  font-size: 14px;
}
td {
  min-width: 150px;
  background-color: #041230;
  font-size: 13px;
  word-spacing: 2px;
}
td:first-child {
  min-width: 50px;
  font-weight: bold;
  color: #66FCF1;
}

<div class="container tableFixHead">
  <table class="tablecolor2">
    <thead>
      <tr>
        <th>#</th>
        <th>Dummy</th>
        <th>dvfdgdg</th>
        <th>fvfdgfd/fdgdg</th>
        <th>Cdumm</th>
        <th>sdfdgds</th>
        <th>Cd</th>
        <th>Ankjfdksf</th>
        <th>jnknk</th>
        <th>fdfdgdfg</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <!-- Additional rows removed for brevity -->
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      » Additional rows go here
    </tbody>
  </table>
</div>

Answer 3

Answer №2

Is this what you're looking for?

<!DOCTYPE html>
<html>

<head>

  <style>
    table {
      max-width: 600px;
      max-height: 400px;
      border-spacing: 0;
      display: block;
    }
    
    tbody {
      overflow-y: auto;
      overflow-x: auto;
    }
    
    th {
      /*display: block;*/
      border: 1px solid #293033;
      position: sticky;
      top: 0;
      text-align: center;
      padding: 8px;
      color: #e9ecef;
      background-color: #1e2324;
      font-weight: 500;
      font-size: 14px;
    }
    
    td {
      background-color: #041230;
      border: 1px solid #293033;
      text-align: center;
      padding: 8px;
      color: #e9ecef;
      min-width: 150px;
      font-size: 13px;
      word-spacing: 2px;
    }
    
    td:nth-child(1) {
      min-width: 50px;
      max-width: 50px;
      font-weight: bold;
      color: #66FCF1;
    }
    
    .container {
 overflow: scroll;
    }
  </style>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="resCSS.css">

  <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
  <script src="https://cdn.fancygrid.com/fancy.min.js"></script>
</head>

<body>

  <div class="container">
    <table class="tablecolor2">
      <!-- class="tablecolor" -->

      <thead>
        <tr>
          <th>#</th>
          <th>Dummy</th>
          <th>dvfdgdg</th>
          <th>fvfdgfd/fdgdg</th>
          <th>Cdumm</th>
          <th>sdfdgds</th>
          <th>Cd</th>
          <th>Ankjfdksf</th>
          <th>jnknk</th>
          <th>fdfdgdfg</th>
        </tr>
        <tbody>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <!-- Additional rows similar to above -->

        </tbody>
    </table>


  </div>
  <script src="research.js"></script>
  <script src="research2.js"></script>
</body>

</html>

Answer 4

Is this what you're looking for?

<!DOCTYPE html>
<html>

<head>

  <style>
    table {
      max-width: 600px;
      max-height: 400px;
      border-spacing: 0;
      display: block;
    }
    
    tbody {
      overflow-y: auto;
      overflow-x: auto;
    }
    
    th {
      /*display: block;*/
      border: 1px solid #293033;
      position: sticky;
      top: 0;
      text-align: center;
      padding: 8px;
      color: #e9ecef;
      background-color: #1e2324;
      font-weight: 500;
      font-size: 14px;
    }
    
    td {
      background-color: #041230;
      border: 1px solid #293033;
      text-align: center;
      padding: 8px;
      color: #e9ecef;
      min-width: 150px;
      font-size: 13px;
      word-spacing: 2px;
    }
    
    td:nth-child(1) {
      min-width: 50px;
      max-width: 50px;
      font-weight: bold;
      color: #66FCF1;
    }
    
    .container {
 overflow: scroll;
    }
  </style>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="resCSS.css">

  <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
  <script src="https://cdn.fancygrid.com/fancy.min.js"></script>
</head>

<body>

  <div class="container">
    <table class="tablecolor2">
      <!-- class="tablecolor" -->

      <thead>
        <tr>
          <th>#</th>
          <th>Dummy</th>
          <th>dvfdgdg</th>
          <th>fvfdgfd/fdgdg</th>
          <th>Cdumm</th>
          <th>sdfdgds</th>
          <th>Cd</th>
          <th>Ankjfdksf</th>
          <th>jnknk</th>
          <th>fdfdgdfg</th>
        </tr>
        <tbody>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <!-- Additional rows similar to above -->

        </tbody>
    </table>


  </div>
  <script src="research.js"></script>
  <script src="research2.js"></script>
</body>

</html>

Tips for adjusting the table's height and width in a container while also including horizontal and vertical scroll bars in the <tbody> to prevent overflow

Answer №1

Answer №2

Similar questions

Center-aligning images in Bootstrap Carousel

Showing a collection of cards within a dynamic container set up in a 3x3 grid layout to start

Using just a simple HTML code, the d-flex feature in Bootstrap seems to be malfunctioning

Adding a half circle connector in HTML can be accomplished by using SVG (Scal

Crafting a template for mixing up images and quotes without any specific connection - here's how!

Switching between pages, displaying new content within a div without changing the URL address

Leveraging the power of the jQuery load function alongside HTML forms in web

What is the best way to dynamically add getJSON's data to a div whenever the loadmore button is clicked?

Looking to retrieve a specific data element within Vue.js?

Declaration of Character Encoding in CSS3

Discovering Characters in String using jQuery and Implementing a Personalized Class

Different ways to position two header tags on top of each other instead of next to each other

Text area capacity

Error encountered: Failure to construct URL for endpoint 'Bookdetails'. Have you overlooked supplying values for the parameter 'book_id'?

How come my database is not receiving the data from the first name field?

div not recognizing the minimum height specified in percentage

Can Angular toggle visibility of static HTML content?

What is the best way to ensure that my text always aligns perfectly to the end of the line?

Creating dynamic CSS classes with SCSS/SASS

Tablet-friendly dropdown menu