Prevent the Bootstrap table from expanding to the entire screen width and causing unnecessary spacing within the cells

I am facing an issue with a table that expands to fill the screen when it exceeds 600px, causing extra spacing on the right of each cell. How can I prevent this automatic growth and eliminate the unwanted space so that the next column aligns with the end of the largest cell in the previous column?

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

</head>
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">Stat</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Highest Money Reached</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

The code can also be found on JsFiddle

htmlcssbootstrap-4

Answer №1

Utilizing Bootstrap classes can affect table width as the .table class sets the table width to width:100%;. If you wish to prevent the table from stretching to full screen width without affecting other styles, consider removing the table class from your HTML.

To achieve this, simply add the following CSS code:

table.table { width:auto; }

Remember to include this code in your CSS file after the Bootstrap CSS and ensure to use the .table selector to override the Bootstrap styling.

Here's a demonstration:

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

</head>
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">Stat</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Highest Money Reached</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Answer №2

One helpful feature in Bootstrap 5.2 is the availability of the w-auto class.

<table class="table table-dark w-auto">
    <thead>
        ...
    </thead>
</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

What is the best way to add the SO-style <kbd> effect to my presentation made with HTML?

I'm currently utilizing reveal.js to construct an HTML-based presentation. My goal is to incorporate keyboard symbols like the ones found on SO and Github using the <kbd>SPACE</kbd> syntax, resulting in this glyph: SPACE. Despite attempti ...

htmlmarkdownreveal.js

Troubleshooting Issue: Bootstrap 5 Navbar Dropdown Popper Functionality Not Function

I recently updated to the latest release of Bootstrap 5.3 and encountered an issue with my dropdown menu functionality. I have the necessary Bootstrap JavaScript file saved in a folder named bootstrap.js, along with the Popper script saved as popper.js. Th ...

htmlbootstrap-5

Glitch in Safari 6: Round Corners Issue

Greetings! Upon observing the image provided, an unusual behavior can be noticed in Safari 6 concerning round corners. { border-radius: 5px 5px 5px 5px; } Upon hovering over the elements, a thin line appears that seems to accumulate with each subsequent ...

safaricss

When creating a dynamic page number using JavaScript during a print event, the height of an A4 page is not taken into

While creating my A4 invoice using HTML, CSS, and JS, everything appears correctly in the print preview. However, I am encountering an issue where the page number is not aligned properly and extra empty pages are generated automatically. Below is a snippe ...

javascripthtmlcssprint-preview

The text in Outlook for Windows emails is being obscured by a button that is overlapping it

As a newcomer to HTML email development, I've encountered an issue that has been puzzling me for the past few days. The problem lies in creating a two-column layout where the left column contains an image and the right column holds text along with a b ...

htmlcssemailoutlookhtml-email

Brother or sister is never empty, as every comment is considered an entity

When going through a list of jQuery objects, I want to verify if the nextSibling attribute is null. However, I found that an HTML comment also counts as a sibling object. How can I address this issue? I am looking for an if statement that will trigger fo ...

javascriptjqueryhtml

How to implement multiple dependent select boxes in Rails?

I'm currently working on developing a car application where each car is assigned to a specific make and model. However, not all makes have every model available. My goal is to create a series of select boxes that update dynamically based on the selec ...

jqueryhtmlruby-on-railsajaxselect

Applying CDNJS CSS or external CSS to Nodemailer HTML templates with Jade and Express: A Guide

I am attempting to send emails using node mailer. I have a jade template with HTML markup in an external file, which is compiled and rendered correctly. However, the styles inserted through maxcdn or cdnjs are not being applied. In this situation, how can ...

javascripthtmlnode.jsemailexpress

Validation for a datepicker embedded within a table

I'm facing a challenge and need some assistance. I want to validate if the "FROM (DATE)" is greater than the "TO (DATE)" without disabling the date selection, but instead prompting the user if the condition is not met. Any insights or solutions would ...

javascriptjqueryhtmljquery-ui

Use React to insert a leading zero next to a number in the input field if the number is greater than 10

I have scoured the web and consulted resources like this one but haven't found a solution that addresses my specific issue with adding padding to input numbers. My goal is to automatically add a leading zero whenever the number inside an input field i ...

javascripthtmlreactjs

Removing special characters in ASP

Can someone please advise me on how to remove special characters in ASP (classic)? I am using an MS Access database. Is there a function similar to stripslashes() or addslashes() in PHP that can help with this? Any assistance would be greatly appreciated ...

htmlms-accessencodingasp-classic

In Vue.js, leverage the power of slots to access content from deeply nested child components

Recently, I came across this example: This child component serves as the foundation for all the components that follow. <template> <div class="content-box"> <div class="boxtitlecontainer titleColor"> <slot name="title"> ...

javascripthtmldomvue.jsslot

Update to the viewport meta tag in iOS 7

Anyone experiencing problems with the viewport tag after updating to iOS7? I've noticed a white margin on the right side of some sites. Adjusting the initial scale to 0.1 fixed it for iPhone but made it tiny on iPad 3, which is expected due to the low ...

javascripthtmlioscssmobile-safari

Formatting Specific Labels in HighCharts: A Guide

I'm trying to display the label values within a Highcharts bar chart by utilizing the dataLabels.Formatter function. However, I've noticed that when the bar size is inconsistent, the labels are sometimes displayed inside the bar, which looks goo ...

csshighchartslabel

What is the best way to fill a "multiselect" element with information from a JSON object?

I'm struggling to populate the multiselect field with data from a JSON object. No matter which multiselect I use, the data shows in inspect mode but not on the frontend. It was supposed to look like this. https://i.sstatic.net/FVz2H.png but it comes ...

javascriptbootstrap-4multi-selectbootstrap-multiselect

Adjusting the mouse movement update frequency – what you need to know!

As I work on developing a function that requires a quick and easy signature, I am facing an issue with the canvas field. Despite using jQuery to handle the signature, the refresh rate of mousemove coordinates seems too slow. This results in white spaces be ...

javascripthtmlrefreshmousemove

How to apply unique styles to multiple elements with the same class using jQuery?

How can I add different classes to multiple div elements with the same class based on their content? <div class = "flag"> Yes </div> <div class = "flag"> No </div> <div class = "flag"> Yes </div> <div class = "flag"& ...

javascripthtmljquerycss

Prevent images in Bootstrap carousel from being cropped while adjusting device height and width

I am attempting to implement a responsive bootstrap carousel similar to the one showcased in the airbnb example. My challenge lies in ensuring that the carousel remains responsive across all device sizes. I have tried setting fixed height and width for bot ...

htmlcssbootstrap-4

Encountering unexpected behavior with the .data() method

I'm encountering an issue with my code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv= ...

javascriptjqueryhtmlcssattr

Is there a way to create a two-toned horizontal rule tag?

Looking for a way to create a stylish two-toned divider line at the bottom of my header. It should be two pixels tall, with a grey top half and white bottom half. While I considered using two one pixel divs stacked together, I'm hoping there's a ...

htmllinear-gradientscss