How to Style Bootstrap 4 Tables with Rounded Borders

Currently, I am in the process of enhancing the design of a Bootstrap 4 table within a Node application using handlebars (.hbs). While I have been able to adjust the width of the table with CSS, I am encountering challenges in creating the desired borders and rounded corners for improved aesthetics. The use of CDN from may also be a contributing factor.

I am uncertain why the expected outcomes are not being achieved. Could it be that CSS needs to be approached differently when working with handlebars, or could there be simpler errors on my part?

Included below is a brief snippet of the head section, omitting the CDNs for Bootstrap and jQuery:

HBS / (HTML)

< -- DataTables CDN -->
    /* HTML code here */
</body>

/* Additional content...*/

CSS

#semiBlackHead {
    /* CSS styling properties here */
}

#bleachedBody {
    /* More CSS styles here */
}

#resultsTable {
    /* Troubleshooted CSS properties here */

}
div.dataTables_wrapper div.dataTables_info {
    padding-top: 0;
}

Answer №1

If you're looking to create a table with rounded corners using Bootstrap 4, here's a straightforward way to do it. Take note of the "card" class that wraps around the table, as this is what will give your table those nice rounded edges. This new class replaces the old "panel panel-default" classes from Bootstrap 3 that used to provide rounded corners. Feel free to customize the styling for this class to match your desired look.

   <div class="table-responsive card">
        <table class="table table-bordered table-striped">
            <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>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
            </tbody>
        </table>
    </div>

Answer №2

To achieve the desired effect, you should modify the border property to use border-color and include border-style

#resultsTable {
  border-radius: 25px !important;
  border-width: 5px !important;
  border-style: solid !important;
  border-color: rgba(0, 128, 255, 0.9) !important;
  width: 90%;  /*Tested and confirmed to work correctly: */
  padding-top: 1%;
  margin: 0px auto;
  float: none;
}

Alternatively, you can consolidate these properties into a single line:

border: 5px solid rgba(0, 128, 255, 0.9) !important;

Answer №3

Although this question may be old, I recently encountered the same issue and managed to find a solution!

The table I was working with had the classes:

table table-striped table-bordered
. I realized that the table lacked borders, so I included the class bordered to address this.

However, the table still only displayed borders on the top, so in my CSS file, I added the following styles:

 border-top-right-radius: 15px;
 border-top-left-radius: 15px;

It's important to note that when applying these lines of code, they do not allow additional attributes such as color or style. For instance, using

border-top-right-radius: 15px solid red;
will not work.

Therefore, in the HTML markup:

<table class="table table-striped table-bordered">

And in the CSS file:

.table-bordered {
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

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

jQuery: Remove the class if it exists, and then assign it to a different element. The power of jQuery

Currently, I am working on a video section that is designed in an accordion style. My main goal right now is to check if a class exists when a user clicks on a specific element. The requirement for this project is to allow only one section to be open at a ...

Aligning content in a div with proportional elements, maintaining left alignment of the elements

Trying my hand at creating an HTML template to display TV shows as cover artwork. The layout is flexible, showing up to five shows per row on larger screens and a minimum of two on smaller screens like smartphones. It's been a while since I've wo ...

Unable to alphabetically arrange buttons automatically

I am encountering a challenge with automatically sorting buttons alphabetically on my webpage. I am unable to determine the method for sorting these buttons using jquery or javascript, but my goal is to have them sorted automatically when the page loads. I ...

Can a mobile device be programmed to automatically bring up the keyboard for the autofocus element?

Currently utilizing Meteor for my project and facing an issue with a "Add new" button. When clicked, the button disappears and is replaced by a text box. The toggle logic between the button and input is complex and not relevant here. Check out the HTML co ...

Is it possible to change the inner html to null during an active ajax request?

My goal is to have two separate data.html files inserted into two different HTML files without needing a click event. I want the structure of my data.html files to remain consistent, while allowing the template of my website to change dynamically by callin ...

Can we expect every bullet point to be consistently indented at precisely 1.8em?

Recently, I created a dropdown menu using only CSS. The challenge was to have a horizontal bar of items that can each expand into a vertical menu. However, I wanted the expanded menus to display bulleted lists instead of tertiary menus. By nesting three ul ...

Jquery Droppable issue arising with dynamically added DIVs

I am facing a similar issue as described in this question and this one I am trying to implement drag-and-drop and resize functionality. It is working fine for static elements, but I encounter issues when adding dynamic divs. The resize property works prop ...

Looking to retrieve the checkbox value from HTML in AngularJS and pass it to the controller

How can I retrieve the value of a checkbox on button submit in a controller Function? <input id="Check" type="checkbox" ng-model="CheckValue" /> ...

What is the best way to insert hyperlinks within every cell of a table using Angular?

I am currently working on a table created with ng-repeat in Angular. The cells are populated by variables in the scope. <tbody> <tr ng-repeat="item in items" myDirective> <td>{{item.title}}</td> <td>{{item.field}}&l ...

Using jquery to create HTML elements but unable to remove them using jquery

I'm facing an issue with removing newly created li elements in an unordered list using jQuery. The delete button works perfectly fine for the existing li, but not for the ones added dynamically. <!DOCTYPE html> <html lang="en> <head> ...

Conceal the iframe if the source is http:// and there is no associated

Is there a way to hide the iframe only if the src starts with "http://"? This is what I have tried so far: <script type="text/javascript> if ( $('iframe[src^="http://"]') ) document.getElementById('iframe').style.d ...

The initial value set for the innerHTML property of a div element

I have a requirement in my application where I need to confirm if the container div is empty before adding specific text elements to it. The innerHTML of this div is frequently created and removed within the app, so it's crucial to validate its emptin ...

Interactive tables created using Google Visualization

I have a Google visualization data table that works well, but I am facing an issue with the width of the table. When I click as shown in the image, I call the function drawTable(); and then I encounter this: As you can see, the table does not have a width ...

JavaScript double-click functionality is not operational on IE9 and IE11 browsers

My JavaScript code has an issue where single-click opens a link in a new tab and double-click opens a lightbox. This works perfectly in all browsers except for IE9 and IE11. In my initial code, both single-click and double-click function correctly. However ...

Show concealed content for individuals who do not have javascript enabled

One of the challenges I faced was creating a form with a hidden div section that only appears when a specific element is selected from a list. To achieve this, I utilized CSS to set the display property of the div to 'none' and then used jQuery t ...

How can I verify if an SVG file has a reliable source? (having troubles converting SVG to canvas)

While attempting to use an SVG generated by a chart plugin (https://wordpress.org/plugins/visualizer/), I am facing issues retrieving the source of the SVG-image being created. Interestingly, when using other SVGs with the same code, everything works perfe ...

Manipulate HTML elements using JavaScript when a key is being held down

I'm currently developing a simple game using vueJS for the frontend. I have successfully created all the necessary objects and now my goal is to enable their movement when a key is pressed. However, I am facing an issue where the object only moves on ...

How can you show a green check mark next to an input field in AngularJS after inputting valid data?

I am diving into the world of AngularJS and Angular Material with my web application. As a beginner in AngularJS and Angular Material, I need some help. My current task is to display a green checkmark next to an input field only when valid data is entere ...

fa icons moving the elements aside

I'm attempting to design a navigation menu with tabs, but I'm facing an issue where the tabs containing "fa icons" are consuming too much space, causing other elements to be shifted to the right or below (if there were more lines). How can I pre ...

Is there an error when iterating through each table row and extracting the values in the rows?

Here is a basic table that I am attempting to iterate through in order to retrieve the value of each cell in every row where there are <td>s present. However, I encounter an error indicating that find does not exist despite having added jQuery. Any ...