Show the contents directly within the Bootstrap table

I'm currently facing an issue with displaying monetary value information in a Bootstrap 4 table in responsive mode. Here's a breakdown of my problem:

Here is the HTML code snippet I am using:

<div class="table-responsive">
 <table class="table table-hover">
   <thead>
     <tr>
       <th scope="col">#</th>
       <th scope="col">First</th>
       <th scope="col">Last</th>
       <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope="row">1</th>
        <td>$ 1,543,3345,432</td>
        <td>$ 1,456,334,4545</td>
        <td>$ 1,000,0202</td>
      </tr>
    </tbody>
   </table>
</div>

The table displays perfectly on PC: https://i.sstatic.net/3yUub.png

However, when viewed in responsive mode, the problem arises: https://i.sstatic.net/UzfbB.png

What I aim for is to make it appear the same on both PC and responsive modes. I've tried adjusting the CSS in various ways but haven't found a solution yet.

Any help would be greatly appreciated!

csstwitter-bootstrapbootstrap-4

Answer №1

One way to adjust the width of a table is by making it inline, or you can also use the 'white-space: nowrap;' property for the 'table tr td' element.

.tablewd{
   min-width:450px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="table-responsive">
 <table class="table table-hover tablewd">
   <thead>
     <tr>
       <th scope="col">#</th>
       <th scope="col">First</th>
       <th scope="col">Last</th>
       <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope="row">1</th>
        <td>$ 1,543,3345,432</td>
        <td>$ 1,456,334,4545</td>
        <td>$ 1,000,0202</td>
      </tr>
    </tbody>
   </table>
</div>

Answer №2

To prevent text from breaking in a table, utilize Bootstrap-4's text-nowrap class.

/* This code is from the Bootstrap-4 source */
.text-nowrap {
  white-space: nowrap !important;
}

Check out this example on CodePen

Answer №3

Increasing the amount of css would be beneficial:

.table td {  white-space: nowrap; }

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

Prevent the div from being selected when it is behind the overlay

I am trying to display an overlay on top of a div. Once the overlay is displayed, I want to prevent any interaction with the background div. Unfortunately, when I double click on the overlay, the background div becomes selectable. Could someone please in ...

jquerycssoverlay

Creating a button with a side icon using Bootstrap

I have a simple question. I currently have a button: <button class="btn btn-warning" style="width: 20%; color: white"> <i class="fa fa-plus-circle"> <h5> <strong>Add Branch< ...

htmlcssbootstrap-4

Is there a way to dynamically adjust the carousel slide indicators based on the changing viewport size?

My carousel is inspired by the one at the following link: I am looking to make a modification where, as the screen size decreases, the bottom links disappear and are replaced with dot indicators for switching between slides. ...

javascripthtmlcss

Implementing a list using display: inline-block without any specified order

Currently, I am immersed in a project that involves simulating an input using HTML and CSS. This input should be capable of executing a function like: my_cool_function(param0, param1, param2, param3). To accomplish this, I have constructed an unordered lis ...

javascriptjqueryhtmlcss

Is it recommended to place the styles created by material-ui for child components after the styles generated for the parent component?

Utilizing material-ui, which utilizes JSS for styling a website. I have a component named Layout that applies margin to all its children (using the all children selector & > * in its style). This functionality works, but I would also like the child ...

javascriptcssreactjsmaterial-uijss

What is a way to simulate division using only multiplication and whole numbers?

The issue at hand: The stack-building API that I'm currently using in rapidweaver has limitations when it comes to division or floats, making it challenging to perform certain mathematical operations. Insights into the API's rules: This partic ...

javascripthtmlcssalgorithmmath

Discovering the CSS Selector Path for Selenium in C#

I recently started working with Selenium C# automation and have been having trouble finding the solution online. The HTML code that I am dealing with is as follows. My goal is to locate a specific element using CSS and click on it. It's worth noting t ...

c#cssselenium

Modify th:hover in CSS to alter the background color

I currently have a table structured as follows: <table class="cedvel"> <caption> count: <%:Html.Encode(TempData["RowsCount"])%></caption> <thead> <tr&g ...

css

(struggling beginner) Struggling to execute PHP on a website built with the Laravel framework

I have a PHP site that I developed. My client now wants to add some functionality, but whenever I try to set it up on my machine or host it on Hostinger, I keep encountering the following error: Warning: require(/home/u364558673/public_html/../bootstrap/a ...

phpmysqltwitter-bootstrap

Place the image in the middle of a div

Struggling to horizontally center an image in a div, but for some reason it's just not working. I've centered images many times before, so why is it different this time? Here's what I've attempted... CSS #cabeca{ position: relative; f ...

htmlcssimagecenter

Does adjusting the background transparency in IE8 for a TD result in border removal?

I attempted to create a JSFiddle, but it was not coming together as expected. My goal is to change the color of table cells when hovered over. I have been trying to adjust the opacity of the background color for this effect, but I encountered some strange ...

jqueryhtmlcssinternet-explorer

Right-align the text in the title of the material card

Why isn't the CSS aligning my title of matcard to the right? <mat-card [ngStyle]="{ 'margin':'5px','height':'130px'}"> <mat-card-header> <mat-card-title [ngStyle]="{ 'text-align': ...

cssangularangular-materialmat-card

Creating a scrolling effect similar to the Nest Thermostat

After researching countless references, I am determined to achieve a scrolling effect similar to the Nest Thermostat. I came across this solution on this JSFiddle, but unfortunately, the parent element has a fixed position that cannot be utilized within my ...

javascripthtmljquerycssparallax

header is fixed and a panel slides down and remains fixed while scrolling down the page

I am encountering difficulties while trying to implement a fixed header with a slide-down panel that also remains fixed as you scroll down the page. Currently, when the slide-down panel is open, the page content scrolls under the header. However, I want ...

javascriptjquerycss

Formatting Text in CSS and HTML

I need help aligning three images horizontally with text underneath, using CSS. Despite trying multiple methods, the images remain vertically aligned and the text does not align properly with the images. #img_cont { display: table; width: 90%; ...

htmlcss

Tips on customizing the CSS responsiveness of your Bootstrap carousel

I have recently installed a Bootstrap theme on my Wordpress site and I am trying to make some CSS adjustments. One issue I am facing is with the carousel. Currently, when I resize the website or view it on a mobile device... The carousel maintains a lar ...

htmlcsswordpresstwitter-bootstrapbootstrap-4

Displaying all hidden sections on a website

I'm trying to figure out if there's a way to expand all the collapsible sections on a webpage at once. One section that is relevant to my search looks like this: <tr> <td></td> <td style="..;"> <div s ...

javascriptcsshtml

Expanding an HTML table with a click: A step-by-step guide

I have successfully generated an HTML table using JavaScript. However, I now need to display additional data in a row by expanding it on click. Table functionality: The table is populated with brands and their respective items. When a brand is clicked, ...

javascriptjqueryhtmlhtml-tablebootstrap-4

What is the purpose of the asterisk symbol in CSS?

Can you explain the purpose of the star symbol in CSS and what it is commonly referred to as? I see it as a type of wild card, but I would like to research it further. #div { *zoom: 1; /*this ... * zoom : 1; display: inline; *display: inline; /*. ...

css

How to Align Items Horizontally in React Material UI Grid for Containers of Varying Item Counts

I've been utilizing the React Material UI Grid System to arrange my elements on the page, which utilizes flexboxes internally. While everything is functioning properly, I'm struggling with horizontally aligning items in containers that have vary ...

htmlcssreactjsflexboxmaterial-ui