How can I ensure that a bootstrap table is centered and takes up 100%

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<table class="table table-striped table-hover table-responsive">
  <thead>
    <th scope="col">column1</th>
    <th scope="col">column2</th>
    <th scope="col">column3</th>
  </thead>
  <tbody>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
    </tr>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
    </tr>
  </tbody>
</table>

Could you possibly center this table without specifying a width other than 100%? Most solutions I've come across involve setting the table width less than 100%, but that's not ideal because when you center it, on larger screens, the table may still appear off-center.

cssbootstrap-4

Answer №1

To center horizontally, apply the classes mx-auto w-auto. Make sure to enclose the table within table-responsive.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="table-responsive">
    <table class="table table-striped table-hover mx-auto w-auto">
        <thead>
            <tr>
                <th scope="col">column1</th>
                <th scope="col">column2</th>
                <th scope="col">column3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
        </tbody>
    </table>
</div>

https://codeply.com/go/gotnKXfdw2

Answer №2

For proper table display, enclose your table within a div with the class table-responsive as shown below:

<div class="table-responsive">
<table class="table table-striped table-hover">
  <thead>
    <th scope="col">column1</th>
    <th scope="col">column2</th>
    <th scope="col">column3</th>
  </thead>
  <tbody>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
    </tr>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
    </tr>
  </tbody>
</table>
</div>

Tip: To horizontally center a table with less than 100% width, apply the following styles to your .table class.

{
   width:auto;
   margin:0 auto;
}

Answer №3

hopefully this solution will do the trick:

<div class="container table-responsive">   
  <table class="table table-striped table-hover">
    <thead>
      <th scope="col">column1</th>
      <th scope="col">column2</th>
      <th scope="col">column3</th>
    </thead>
    <tbody>
      <tr>
        <td>item1</td>
        <td>item2</td>
        <td>item3</td>
      </tr>
      <tr>
        <td>item1</td>
        <td>item2</td>
        <td>item3</td>
      </tr>
    </tbody>
  </table>
</div>

Answer №4

For a code sample, check out the snippet below directly from the official Bootstrap website.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<table class="table text-center">
  <thead>
    <tr>
      <th scope="col">column1</th>
      <th scope="col">column2</th>
      <th scope="col">column3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
    </tr>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
    </tr>
  </tbody>
</table>

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

Relocate the text within the confines of the border

Currently, I am attempting to position the text within a bold border of its parent element. My component, built using material-ui, resembles this code: <List className={classes.root}> <Typography className={classes.fieldLabel}>Attach ...

javascripthtmlcssreactjsmaterial-ui

Mixins with fewer inclusions do not have the ability to inherit

I am a beginner with Less.js and I am struggling to reuse the p.InputTitle in my examples. Unfortunately, it is not working for me and I keep encountering errors. After doing some research, I came across mixins and learned about the possibility of using &a ...

cssless

Alter the placement of two bootstrap rows based on the button that is selected

I have a webpage with two bootstrap rows and two buttons positioned at the top of the screen. I want to achieve a functionality where clicking the second button will bring the second row on top of the first row, and vice versa. Here are my two rows: < ...

javascriptjqueryhtmlcsstwitter-bootstrap

Displaying user input data in a separate component post form submission within Angular

I recently developed an employee center app with both form and details views. After submitting the form, the data entered should be displayed in the details view. To facilitate this data transfer, I created an EmployeeService to connect the form and detail ...

htmlcssnode.jsangulartypescript

What is the best way to transform a rectangular image into a square using CSS?

It's a common misconception that CSS can directly modify images, hence the quotation of "crop." My goal is to take rectangular images and apply CSS to give them a square appearance without altering the image itself. Essentially, I want to transform ...

htmlcssimagecrop

Are the JQuery appended elements exceeding the width of the parent div?

I have an HTML div that is styled using the Bootstrap class span9. <div class="span9"> <div id = "selectedtags" class="well"> </div> <button class="btn" type="button" id="delegatecontent">Generate report</button&g ...

javascriptjqueryhtmlcsstwitter-bootstrap

Subclass Pseudoclass in JavaFX is a powerful feature that

I wanted to create two different styles of buttons in one css file. To achieve this, I added a class to the second button using: close.getStyleClass().add("close-button"); Now, I can reference this button in the css by: .button.close-button However, I ...

cssjavafx

Dynamic stretching effects while scrolling using JavaScript and CSS

Wondering if there are any JavaScript libraries or functions that can add an elastic/rubber band effect to specific elements when scrolling. For example, when scrolling quickly and then stopping suddenly, these elements would move out of place briefly befo ...

javascriptjqueryhtmlcss

Ways to customize the datetime-local format in an HTML input field

When dealing with the HTML input of datetime type, consider the following: Datefield: <input type="datetime-local" data-date="" data-date-format="DD MMMM YYYY, h:mm:ss"> The script below includes important code. $("input").val(moment().format(&apo ...

javascriptjqueryhtmlcssdatetime

What Could be the Reason Behind the Sharp Decline in My Google PageSpeed Insights Score?

Optimization On my desktop, I have successfully achieved a high page speed score of 96 on this site: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.usstoragecenters.com%2Fstorage-units%2Fca%2Falhambra%2F2500-w-hellman-ave&am ...

javascriptcssoptimizationpagespeed

Tips for preserving a checkbox's checked state even after submitting a form or refreshing the page in PHP

I am trying to retain the checked state of a checkbox after a page refresh or submit. Currently, the checkbox is located inside a dropdown button, and after submitting the results are displayed without maintaining the checked state. Below is the HTML code ...

javascriptphphtmlbootstrap-4

Decrease the width of the text without compromising its alignment

In the <p> tag, I have some text. This is my current CSS for the <p> tag: p { max-width:1000px; text-align:center; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; } As you can see, the text ...

htmlcss

Issues arise when implementing a sticky position using CSS with incomplete functionality

I want to create a website with a menu bar that stays at the top even on long pages. However, when I use position: sticky in CSS, the menu disappears after scrolling a certain distance. Does anyone know how to fix this issue? HTML: <nav> <ul cla ...

csssticky

unable to choose options from drop-down menu - angular 4

Here is a dropdown that I have. https://i.sstatic.net/D6AMs.png <button type="button" class="btn btn-secondary dropdown-toggle form-group" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span id="se ...

angularselectbootstrap-4dropdown

Make sure to always display the browser scrollbar in order to avoid any sudden page

Question: How can I ensure the scrollbar is always visible in a browser using JavaScript? I've noticed that some of my web pages have a scrollbar while others do not, causing the page to jump when navigating between them. Is there a way to make t ...

htmlcssbrowserscrollbar

CSS file not loading in an ExpressJS application

I'm facing an issue with my ExpressJS web app where only the HTML files are loading but the CSS rules are not being applied. I have linked the HTML file with the CSS file and also included express.static(path.join(__dirname, 'css')) in my ap ...

javascripthtmlcssnode.jsexpress

What are the steps for positioning the footer at the bottom of the page?

Need help positioning a footer at the bottom of the page? Using the class fixed-bottom causes the footer to overlap the content when scrolling. <div class="sticky-top"> <qipr-header></qipr-header> <qipr-sidenav>&l ...

cssbootstrap-4

What steps should I take to make the Bootstrap grid gy-5 function properly?

When using a bootstrap grid with the gy-5 utility, I noticed that there is no spacing between rows. However, if I change the class from grid to row, the spacing appears. But this raises the question - why would I want a row of multiple rows? There seems t ...

twitter-bootstrapbootstrap-4bootstrap-5

Applying SVG filters in conjunction with CSS transitions

While working on an SVG filter with CSS animation, I utilized the following code: <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result= ...

htmlcssanimationsvgcss-transitions

Arrange the text within a div element

Is there a way to move this button to the right side of the container? <div> <h1>Sensors</h1> <h:form id="new_sensor_button"> <p:commandButton value="New Sensor" id="ajax" styleClass="ui-priority-primary" /> </h ...

htmlcssflexbox