Enhancing Responsive Tables with Vertical Alignment in Bootstrap 4

When utilizing Bootstrap 4 and adding table-responsive to a table, the text may no longer be centered vertically. Is this a bug? If not, is there an easy solution available to center the text in the middle? A pure Bootstrap solution would be greatly appreciated.

An example of this issue is shown below.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 

<table class="bg-danger table-responsive" style="width:300px; height:200px;">  
  <tr>
    <th scope="row">
      <div class="text-left">
        table-responsive
      </div>      
    </th>
  </tr>  
</table>

<table class="bg-success " style="width:300px; height:200px;">  
  <tr>
    <th scope="row">
      <div class="text-left">
        no table-responsive
      </div>      
    </th>
  </tr>  
</table>

htmlcssbootstrap-4

Answer №1

For optimal responsiveness, make sure to apply the .table-responsive class to a container element rather than directly to the table itself.

Check out the documentation for more information

Responsive tables enable horizontal scrolling for tables, allowing for better viewing on different screen sizes. To ensure a table is responsive on all viewports, enclose it in a .table-responsive wrapper. Alternatively, specify a maximum breakpoint for responsiveness using .table-responsive{-sm|-md|-lg|-xl}.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="table-responsive">
  <table class="bg-danger" style="width:300px; height:200px;">  
    <tr>
      <th scope="row">
        <div class="text-left">
          table-responsive
        </div>      
      </th>
    </tr>  
  </table>
</div>
<table class="bg-success " style="width:300px; height:200px;">  
  <tr>
    <th scope="row">
      <div class="text-left">
        no table-responsive
      </div>      
    </th>
  </tr>  
</table>

Answer №2

To customize the appearance of bootstrap styles, use your own styles like "display:table":

<table class="bg-danger table-responsive" style="width:300px; height:200px; display:table;"> 
...

However, be aware that if there is a lot of text in a cell, it may get cut off. Refer to the documentation for responsive tables:

Vertical clipping/truncation Responsive tables utilize overflow-y: hidden, which trims any content that extends beyond the top or bottom boundaries of the table. This can potentially clip dropdown menus and other external widgets.

Answer №3

To ensure proper alignment of content within the table, set a specific height for the tbody element instead of applying it to the entire table. This allows you to remove any unnecessary inline styles and customize the sizing as needed. You can also override Bootstrap styles by defining widths for non-responsive tables and max-widths for responsive ones.

Example:

I've replaced fixed dimensions with responsive values (e.g., changing 300px to 45vw)

table {
  width: 45vw;
  max-width: 45vw;
}

tbody {
  height: 30vw;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<table class="bg-danger table-responsive">  
  <tr>
    <th scope="row">
      <div class="text-left">
        table-responsive
      </div>      
    </th>
  </tr>  
</table>

<table class="bg-success">  
  <tr>
    <th scope="row">
      <div class="text-left">
        no table-responsive
      </div>      
    </th>
  </tr>  
</table>

Answer №4

If you are using a Boostrap 4 table and want to vertically align the content of a cell when the class is class="table-responsive", simply include class="pt-md-3 pt-3" in the <td> element. This will ensure that the content (whether plain text or a div) is aligned properly with respect to the height of the cell, as demonstrated in the following example:

<table class="table-responsive">
  <tbody>
    <tr>
      <td class="pt-md-3 pt-3">Foo</td>
    </tr>
  </tbody>
</table>

Answer №5

Give this a shot:

.table > tbody > tr > td {
    justify-content: center;
}

Alternatively,

<td class="align-center">Me</td>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML displaying inaccurately

While following a Ruby tutorial to create a Sample App, I encountered an issue with the signup page. The errors displayed during sign up are not formatted correctly - the period at the end of the error line appears before it, and both the asterisk and bull ...

htmlcssrendering

Converting from CAPS lock to using the capitalize property in CSS

Is there a way to transform a sentence that is all in CAPs lock without changing it? This sentence is part of a paragraph, and I am looking for a CSS solution (maybe with a little Jquery) that works reliably across most devices! I have come across similar ...

htmlsentencecss

modify the color of a particular div element in real-time

I am looking to dynamically change the color of the divs based on values from my database. Here is what I have so far: Database: shape id is_success id1 0 id2 1 id3 0 id4 1 <div class="container" style="background: black; widt ...

javascriptphpjqueryhtmlajax

Creating a horizontal layout for list items that are responsive using CSS

My website has a "Featured" section with 3 equally sized elements displayed horizontally. I want to make the webpage responsive by using percentage widths, but when I resize the window to less than the list width, the items stack on top of each other. Che ...

htmlcsshtml-listshorizontallist

Fatal error in CodeIgniter occurring while invoking CSS less functions

Whenever I try to execute this function, I encounter the following error message: "Fatal error: Uncaught exception 'Exception' with message 'load error: failed to find test.less' in C:\xampp\htdocs\project\applic ...

phpcsscodeigniterless

What is the best way to create an overscroll bounce effect for a list with a fixed height, even when the list items have not surpassed the height of the container?

When using a fixed-height ul with overflow scroll, the list will not have an overscroll bounce effect until its items exceed the height of the list. However, on mobile, I want the list container to have an overscroll bounce effect even when its items hav ...

htmlcssuser-interfacemobilescroll

Utilizing a fallback option for HTML5 video with a flash player and the ability to manipulate the

My dilemma involves an HTML5 video where I am utilizing jquery to interact with the player using the code snippet: video.currentTime += 1;. However, when Internet Explorer switches to Flash plugins, my JQ commands cease to function. How can I manage and co ...

javascriptjqueryflashhtml

Having trouble connecting a JavaScript file from my local directory to an HTML document. However, when I try to access it in the browser, I keep getting

Currently, I am attempting to connect a javascript file to my html document. Following the directions at this link, I am trying to enable the selection of multiple dates from a calendar as input in a form. The instructions mention that I need to include ...

javascriptjqueryhtmljquery-uijquery-multidatespicker

What are the steps to repairing the footer on your website?

Here is the issue I am facing: The footer in my HTML code appears after the grid. How can I fix this problem and make my footer fixed? Below is my HTML and CSS code for reference: <footer> <li><a href="">Menu</a>< ...

htmlcss

Having trouble loading @font-face fonts

I am experiencing an issue where my downloaded fonts are not showing up in Chrome. I am utilizing scss which gets compiled to css using gulp. If I directly visit http://project-name.localhost/data/fnt/Shermlock.ttf I can successfully download the font. ...

cssapachefontssassdirectory-structure

What are the reasons behind the ineffectiveness of !important in CSS?

I am looking to increase the font-size of all text on my website to 200%, you can find some test code in this Fiddle link. If it is a PX issue, why does the code work when I add the style to "<h2>"? <div> <h2 class="test" style="font-size: ...

htmlcss

What could be the reason my CSS styles are not taking effect when trying to flip an image?

I am facing an issue with an app that has a two-sided HTML element. The goal is to flip the element when a user clicks a button. I have been experimenting with different approaches without success. Here is the code snippet I have been working on: HTML < ...

htmlcssvue.js

Pop-up website opening with fixed dimensions error

On my webpage, I have a terminal where you can type commands and receive output. For example, typing "/unsolvedproblems" displays a list of unsolved problems with a hyperlink. I've been trying to make the hyperlink open in a popup window with a fixed ...

javascripthtmlhyperlinkpopup

Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

After sending AJAX requests and receiving HTML with multiple div elements (.card), I am using .append to add new .card elements after each request, creating an infinite scroll effect. However, I am facing issues when trying to use .each to iterate over all ...

javascriptjqueryhtmlcssajax

Users are reporting a problem with the PrimeNG confirmation dialog where it becomes unresponsive and locks up the screen

Previously functioning code seems to have been affected by an update to PrimeNG. The confirmation dialog that was once usable is now hidden behind a gray click-mask, rendering everything on the screen unclickable: https://i.sstatic.net/YN7Iu.png The HTML ...

javascriptcssangulartypescriptprimeng

Struggling to eliminate the underlines from an HTML hyperlink

Can someone help me figure out how to remove the annoying underline link that pops up when hovering over an a element in HTML? I attempted adding a style="text-decoration: none" attribute to the a link, but the underline persists when I hover over the text ...

htmlcss

Implementing pagination to streamline search result presentation

I am struggling to implement pagination for the following query that retrieves a lengthy list of items from the database. I want to limit the display to 10 items per page but unsure how to integrate pagination into the existing function. // fetching items ...

phphtmlmysqlmysqlipagination

How can I include JavaScript in an HTML document?

My folder structure is as follows: Inside webapp/WEB-INF/some.jsp, I also have a javascript file located in the same directory at webapp/WEB-INF/js/myform.js. I referenced it in some.jsp like this: <script type="text/javascript" src="js/myform.js"> ...

javascriptajaxhtml

Sending a variable to an AngularJS factory

I am currently working on a select list that looks like this: <select name="make" class="form-control" ng-model="selectCity"> <option value="Kannur">Kannur</option> <option value="Agra">Agra</option> <option va ...

javascripthtmlangularjs

What is the best way to position a box in the center using CSS?

I have constructed a container using div and included 4 additional div elements inside: HTML: <div className='main__container'> <div className='item'>Image</div> <div className='item'>N ...

htmlcssreactjs