Adjust column width in Bootstrap table based on content width, minimizing space usage in the column

I'm attempting to adjust the width of a specific table column in Bootstrap to fit its content width. I want the first column to take up as little space as possible. Check out the code snippet and jsfiddle link below to see what I've tried so far.

Any help would be greatly appreciated!

Expected outcome:

Some Heading
Some text some text Some text some text Some text some text Some text some text:

AAA:   Some Text A
B:     Some Text B
CCCCC: Some Text C

https://jsfiddle.net/ne45y0gm/

<h4>Some Heading</h4>
<p class="mb-1">Some text some text Some text some text Some text some text Some text some text:</p>

<table class="table table-sm table-borderless">
  <tr class="row">
      <td class="col-sm-auto">AAA:</td>
      <td class="col">Some Text A</td>
  </tr>
  <tr class="row">
      <td class="col-sm-auto">B:</td>
      <td class="col">Some Text B</td>
  </tr>
  <tr class="row">
      <td class="col-sm-auto">CCCCC:</td>
      <td class="col">Some Text C</td>
  </tr>
</table>

<hr>

<div class="row">
  <div class="col-sm-auto">AAA:</div>
  <div class="col">Some Text A</div>
</div>
<div class="row">
  <div class="col-sm-auto">B:</div>
  <div class="col">Some Text B</div>
</div>
<div class="row">
  <div class="col-sm-auto">CCCCC:</div>
  <div class="col">Some Text C</div>
</div>

<hr>

<div class="row">
  <div class="col-sm-2">AAA:</div>
  <div class="col-sm-10">Some Text A</div>
  <div class="col-sm-2">B:</div>
  <div class="col-sm-10">Some Text B</div>
  <div class="col-sm-2">CCCCC:</div>
  <div class="col-sm-10">Some Text C</div>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To make the table automatically adjust its width, apply the .w-auto class:

<table class="table w-auto">
  <tr>
    <td>AAA:</td>
    <td>Some Text A</td>
  </tr>
  <tr>
    <td>B:</td>
    <td>Some Text B</td>
  </tr>
  <tr>
    <td>CCCCC:</td>
    <td>Some Text C</td>
  </tr>
</table>

Answer №2

STANDARD TABLE

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="table-responsive">
  <table class="table w-auto">
    <tr>
      <td>AAA:</td>
      <td>Some Text A</td>
    </tr>
    <tr>
      <td>B:</td>
      <td>Some Text B</td>
    </tr>
    <tr>
      <td>CCCCC:</td>
      <td>Some Text C</td>
    </tr>
  </table>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10607f606075623e7a6350213e21263e20">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Is there a way to automatically break the column if the content exceeds the screen width? Similar to the example provided.

I recommend avoiding the following snippet as it may not be considered best practice in coding.

.table tr {
    display: flex;
    flex-wrap: wrap;
}

.table tr td:last-child {
    margin-left: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="table-responsive">
  <table class="table w-auto">
    <tr>
      <td>AAA:</td>
      <td>Some Text A</td>
    </tr>
    <tr>
      <td>B:</td>
      <td>Some Text B</td>
    </tr>
    <tr>
      <td>CCCCC:</td>
      <td>Some Text C</td>
    </tr>
  </table>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4c4dbc4c4d1c69adec7f4859a85829a84">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

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

Tips on customizing text input in jQuery editable

I have been tasked with customizing the Text Input within my Table using jQuery editable. You can access the Table here. When you navigate to the page and click on Wordpress Design, you are able to edit the text within the Text Input. However, the issue a ...

jquerycssjeditabletextinput

What are the possible reasons for my load function failing intermittently?

I have encountered an issue with my app where sometimes the content is not loaded into a dialog. Most of the time it works perfectly, but occasionally it fails to display the content. Here is the code snippet that I am using: $('#popup_background&apo ...

javascriptjqueryhtml

What is the anticipated durability of flex products?

UPDATE: JANUARY 2014 - The answer provided previously is no longer relevant. This question has been posted on flexcoders as well. Our team primarily works with flex technology. However, a potential client has expressed concerns about the longevity of fle ...

htmlflashapache-flex

Exploring the capabilities of ng-table within AngularJS Material

I'm interested in incorporating this table into my material design angularjs app: However, the challenge lies in the fact that it requires bootstrap. Having two CSS frameworks may not be ideal. Is there a way to extract the necessary CSS for ng-tabl ...

javascripttwitter-bootstrapmaterial-design

Sending a concealed input according to the chosen option

I'm attempting to send some hidden values to a Servlet via a form, but my goal is to only pass them if the user chooses a specific option. <!-- FORM ABOVE --> <input type="hidden" name="foo" id="foo" value="foo"> <input type="hidden ...

javascripthtmlformsservletshidden-field

Effortless content extraction between HTML tags using BeautifulSoup in Python

My Weather Data Extraction Project: I'm currently developing a webpage scraper to collect weather information. This is the progress I have made so far: import urllib.request from bs4 import BeautifulSoup # opening the webpage and storing the conten ...

pythonhtmlparsingbeautifulsoup

Is there a way to automatically select all checkboxes when I select contacts in my case using Ionic 2?

initializeSelection() { for (var i = 0; i < this.groupedContacts.length; i++) { for(var j = 0; j < this.groupedContacts[i].length; j++) this.groupedContacts[i][j].selected = this.selectedAll; } } evaluateSelectionStatus() { ...

javascripthtmlangularionic2

Combining Razor Pages with Bootstrap for seamless integration, ensuring links are displayed without any unnecessary

I am puzzled as to why a margin or space between my action links disappears after adding the if statement. I am confident that the HTML appears identical with or without @if (User.IsInRole("Admin")) when viewed from the admin perspective. My code is utiliz ...

htmlbootstrap-4razor-pages

Tips for centering text and icon on a Bootstrap navigation bar

I am currently developing an Angular 4 application that includes a navigation bar with text and font awesome icons. While the UI looks good in web view, I'm facing alignment issues when it comes to mobile view (minimized screen). Despite my efforts, ...

htmlcssbootstrap-4

Issue with disabled state in radio button container not functioning

I am facing an issue with a radio button div that I need to disable when the condition yAxisEditorCtrl.forceCombinedYAxis is true. Here is the original code: <div class="y-axis-editor"> <div class="vis-config-option display-size-normal form- ...

javascripthtmlangularjsangularjs-ng-disabled

What is the best way to display just the border of a background image while hiding the content?

The demonstration at this codepen https://codepen.io/Chester/pen/QPoyjN showcases a border animation effect. While it works effectively with a white background, I am interested in making the box's background dynamic. <div class="rainbow"& ...

htmlcsssasscss-selectors

Issue with custom page not displaying summary image in Moodle

Whenever I try to fetch a summary image on my customized page, it does not show the image's name and instead displays a small icon image. echo format_text($course->summary); Click here for an example image ...

phphtmlmysqlmoodle

Wrapping Text around an Image in HTML

I am currently in the process of designing a website using the flexible box model. My main challenge right now is trying to align text to the right of an image, and then below it. I've attempted using float:right/left along with align="left/right", bu ...

htmlcssimageword-wrap

Activate real-time highlighting by clicking on the search button

I created a simple program that searches for a value within a div and displays the first location of the word. However, I am looking to enhance it by highlighting all repeated locations of the searched word after pressing the search button. <html> & ...

javajavascriptjquerycssweb-deployment

An issue arose while attempting to retrieve information based on the specified ID within the database

I am facing a challenge that I need help with, I have a webpage that displays questions fetched from a database and I have created a comments section for each question. How can I retrieve comments based on the post_id? I attempted to fetch them as usual bu ...

phphtmlmysqllaravel

Creating a Bootstrap layout with a fixed top navigation bar, sidebar, and footer

I have a webpage with four components. Top Navigation Sidebar Footer Main content My goal is to have the Top Navigation fixed at the top, the footer fixed at the bottom, and the sidebar to stick to the left with full height. To achieve this layout, I h ...

htmlcsstwitter-bootstrapbootstrap-4styles

Using HTML and CSS to Dynamically Alter Cell Text Color Based on Value

Unfortunately, I am unable to find a straightforward solution. My goal is to adjust the text color inside my cell based on its value. Here is a basic table: <table> <tbody> <tr> <td>Quantity</td> <td> ...

jqueryhtmlcsshtml-tablecell

Struggling to align the footer of your webpage and ensure it adjusts proportionally with the window size?

After trying several codes that have worked before, I ran into a problem when attempting to place two div side by side for the footer. No matter what code I tried, I couldn't get it centered and responsive to the user window ratio. Even after consulti ...

htmlcss

What is causing setTimeout to not function as intended?

I'm having some trouble moving a <div id="box"> whenever my mouse hovers over it. Currently, the element only moves when I trigger the mouseover event on the div itself instead of when my mouse is actually hovering over it. document.getElements ...

javascripthtmldhtmlx

Bullet points colliding with one another

Is there a way to display an unordered list with list items in two rows and multiple columns without the bullet points overlapping? I have tried adjusting margins, but is there a more elegant solution to this issue? The requirement is to maintain the bul ...

htmlcssflexbox