Ensure that a bootstrap table's cell occupies the entire available space, while also allowing for scrolling when there is overflow

Question

Ensure that a bootstrap table's cell occupies the entire available space, while also allowing for scrolling when there is overflow

Many questions have been raised about Bootstrap, Tables, and responsiveness. However, I have yet to find one that addresses my specific issue with getting a particular cell (<td> element) to:

(a) Fill the available space, stopping at the window boundaries (i.e., be fluid), and

(b) Add horizontal scrollbars if the cell would be too large.

Objective:

https://i.sstatic.net/aRxEd.png

Current Solution:

Here is what I have come up with so far. Points to consider:

I am not using any custom CSS, only the one provided by Bootstrap 4.1.3
The
```
<div class="table-responsive">
```
is commented out as I do not want the entire table to be scrollable.
The
```
<pre class="pre-scollable">
```
part successfully adds a vertical scrollbar when the log has many lines, but it does not add a horizontal scrollbar.
Attempts to wrap the results-log cell in a bootstrap class="container-fluid" div did not yield the desired results.
Using
```
<pre class="pre-scollable" style="width: 250px; overflow-x: scroll">
```
achieves the horizontal scrollbar but sacrifices responsiveness.
Adjusting width: inherit does not resolve the issue either.
The entire content is within a
```
<main class="container-fluid-page">
```
and another div, which I believe should not impact this specific problem.

<!DOCTYPE html>
<head>
...
</head>
<body>
<!-- other stuff that doesn't matter -->
<main class="container-fluid-page">
<div id="content">

   <div id="results">
   <h2>Results:</h2>
   <!--<div class="table-responsive">-->
      <table class="table table-sm">
         <tbody>
            <tr>
               <th>Status</th>
               <td>
                  <div id="results-status">
                     foo
                  </div>
            </tr>
            <tr>
               <th>ReturnValue</th>
               <td>
                  <div id="results-return-value">
                     <pre><code class="json">{
  "__type__": "RecordRef",
  "name": "foo"
}</code></pre>
                  </div>
               </td>
            </tr>
            <tr>
               <th>ReturnValue</th>
               <td>
                  <div id="results-log">
                     <pre class="pre-scollable"><code>2019-05-23 07:51:32Z Log text
2019-05-23 07:51:33Z log text that can have a really really really long line in it and I want to scroll
2019-05-23 07:51:34Z log text</code></pre>
                  </div>
               </td>
            </tr>
         </tbody>
      </table>
      <!--</div>--> <!-- class="table-responsive" -->
   </div> <!-- id=results -->

</div> <!-- id=content -->

</main>
</body>

Edits:

Removed col-* from <th> and <td> definitions.

html css html-table bootstrap-4

Answer 1

Answer №1

Reflection

In my opinion, it would have been better not to alter your question based on my feedback. By doing so, you have potentially diminished the helpfulness of the question for future users facing the same issue:

"Why not utilize col-* classes on table cells?"

This is a valid question, especially given Bootstrap's adaptability and multitude of features.

For future reference, here is the original code snippet from the question:

<!DOCTYPE html>
<head>
...
</head>
<body>
<!-- irrelevant content omitted -->
<main class="container-fluid-page">
<div id="content">

   <div id="results">
   <h2>Results:</h2>
   <table class="table table-sm">
      <tbody>
         <tr>
            <th class="col-2">Status</th>
            <td class="col-10">
               <div id="results-status">
                  foo
               </div>
            </tr>
            <tr>
            ...
            ...
               // more table rows and cells
            ...
            ...
         </tbody>
      </table>
   </div> <!-- id=results -->

</div> <!-- id=content -->

</main>
</body>

Solution

The primary reason why col-* classes cannot be applied to table cells is due to a change in Bootstrap's approach from previous versions. Starting from version 4, Bootstrap utilizes display:flex and flex-basis for creating grid layouts, enabling sophisticated alignment, distribution of space, both vertically and horizontally, as well as other benefits accompanying flexbox (e.g., order).

In this scenario, my recommendation is to adhere to the native grid layout system provided by Bootstrap:

pre.pre-scrollable {
  max-height: 132px;
}

#results pre {
  overflow: auto;
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: .25rem;
  margin-bottom: 0;
}

#results>.row>[class^="col-"] {
  padding-top: 1rem;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<main class="container-fluid" id="results">
  <div class="row">
    <div class="col-2">
      <label>Status</label>
    </div>
    <div class="col-10" class="results-status">
      foo
    </div>
  </div>
  <div class="row">
  ...
  ... 
    // additional grid rows and cells
  ...
  ...
  </div>
</main>

This implementation ensures seamless responsiveness. Eliminating the -sm component from the column class names guarantees that the columns maintain their side-by-side presentation on narrower displays, mimicking the behavior of a table.

Answer 2

Reflection

In my opinion, it would have been better not to alter your question based on my feedback. By doing so, you have potentially diminished the helpfulness of the question for future users facing the same issue:

"Why not utilize col-* classes on table cells?"

This is a valid question, especially given Bootstrap's adaptability and multitude of features.

For future reference, here is the original code snippet from the question:

<!DOCTYPE html>
<head>
...
</head>
<body>
<!-- irrelevant content omitted -->
<main class="container-fluid-page">
<div id="content">

   <div id="results">
   <h2>Results:</h2>
   <table class="table table-sm">
      <tbody>
         <tr>
            <th class="col-2">Status</th>
            <td class="col-10">
               <div id="results-status">
                  foo
               </div>
            </tr>
            <tr>
            ...
            ...
               // more table rows and cells
            ...
            ...
         </tbody>
      </table>
   </div> <!-- id=results -->

</div> <!-- id=content -->

</main>
</body>

Solution

The primary reason why col-* classes cannot be applied to table cells is due to a change in Bootstrap's approach from previous versions. Starting from version 4, Bootstrap utilizes display:flex and flex-basis for creating grid layouts, enabling sophisticated alignment, distribution of space, both vertically and horizontally, as well as other benefits accompanying flexbox (e.g., order).

In this scenario, my recommendation is to adhere to the native grid layout system provided by Bootstrap:

pre.pre-scrollable {
  max-height: 132px;
}

#results pre {
  overflow: auto;
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: .25rem;
  margin-bottom: 0;
}

#results>.row>[class^="col-"] {
  padding-top: 1rem;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<main class="container-fluid" id="results">
  <div class="row">
    <div class="col-2">
      <label>Status</label>
    </div>
    <div class="col-10" class="results-status">
      foo
    </div>
  </div>
  <div class="row">
  ...
  ... 
    // additional grid rows and cells
  ...
  ...
  </div>
</main>

This implementation ensures seamless responsiveness. Eliminating the -sm component from the column class names guarantees that the columns maintain their side-by-side presentation on narrower displays, mimicking the behavior of a table.

Ensure that a bootstrap table's cell occupies the entire available space, while also allowing for scrolling when there is overflow

Objective:

Current Solution:

Edits:

Answer №1

Reflection

Solution

Similar questions

How can you determine whether the CSS of a <div> is defined in a class or an id using JavaScript/jQuery?

Determining the active status of a class using oTree and JavaScript

Is there a way to use jQuery to verify if an LI element contains a parent LI element?

What is causing this issue with the basic HTML and CSS code that is preventing it from displaying correctly

Creating CSS rounded corners with pseudo-elements

Safari and Internet Explorer 9 prioritizing min-height over height in rendering

What is the best way to modify React state?

Removing all table rows except one in Jquery

Working towards ensuring my website is responsive

Issue with Angular 2 NgFor Pattern Error Message Display Absence

The form is not being submitted when I click on the submit button because I have two buttons that trigger AJAX requests

Error encountered in angular.forEach syntax

What is the process for a webpage to save modifications made by JavaScript?

Unfinished card or cut-off content within a bootstrap accordion

Creating aesthetically pleasing and uniform rows of responsive Bootstrap 4 cards with consistent heights

Issue with the left margin of the background image

Rotating Cursor during AJAX loading process

The website takes forever to load on Internet Explorer and it keeps freezing

Differentiate your borders with CSS styling of various colors

chosen=chosen based on data from mysql database