I'm having trouble customizing the CSS for the 'table table-bordered' Bootstrap table class. Can anyone offer me some guidance on how to get it to work properly

I'm a beginner in web design and need some assistance.

Currently, I am working with Bootstrap 3.0 and have a table with the following data...

<table class="table table-bordered" width="100%">
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 1</th>
        <th>Column 1</th>
    </tr>
</thead>
<tbody>
    <tr class="found">
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
    </tr>
    <tr class="found">
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
    </tr>
    <tr class="found">
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
    </tr>
    <tr class="found">
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
    </tr>
    <tr class="found">
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
    </tr>
    <tr class="found">
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
    </tr>
</tbody>

I would like to implement a custom site.css file with the following custom class...

I intend to use class selector for "table" and " table-bordered". Therefore, I crafted the code as follows, with a class name of dash.

   table.table-bordered.dash {
    width:100%;
    }

So, the first line of code should look like this...

<table class="dash">

Instead of writing

<table class="table table-bordered" width="100%">

I would like to write something similar to the snippet below

<table class="dash">

However, it is not functioning as expected. Can someone please assist?

Answer №1

If you want to achieve full-width, you can follow these steps

<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
        <table class="table table-bordered">
            ...
        </table>
    </div>
</div>

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

Is there a way to implement a sticky footer on just a single webpage if that's all I need?

On my main page, I have an empty div with only a background image. To prevent it from collapsing, I created a sticky footer using the following code: * { margin:0; padding:0; } html, body, #wrapper{ height: 100%; } body &g ...

Turn off base64 encoding for background URLs in the Minify package

When I use the minify tool to compress my js and css files, I noticed that the files containing background:url(...) statements actually increased in size. This happened because the urls were encoded to base64. I tried to disable this base64 encoding featu ...

setting the child div's margin in relation to its parent div

Here is my HTML: <div class='mainDiv'> <div class='subDiv'></div> </div> This is the corresponding CSS code: .mainDiv { margin-top: 200px; width: 700px; height: 800px; background-color: red ...

Javascript Flickering Effect in HTML5

Currently, I am in the process of creating a simple game using javascript without jQuery. However, I am facing an issue with flickering on the canvas due to the clearing command. After researching solutions online, I came across suggestions for implementin ...

Preventing button movement during navigation collapse toggle click

I am working on setting up my navbar in the following way: [collapse] navbar icon links sign in button Although I have successfully set this up, the issue is that when the navbar collapse toggle is clicked, it shifts the sign-in button u ...

Switch between different content sections using a button in a Bootstrap tab-pane

Here is the code snippet I am currently working with: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-s ...

Retrieve the data from the database using PHP and showcase it within the HTML code

Having an issue with my system, I tried following a tutorial on YouTube and made some modifications to the code. Here is what I have: <label>Department</label> <select> <?php include 'php/connect.php'; ...

Top Method for Reloading Element-Specific JavaScript When Replacing Elements

Is there a better way to re-initialize JavaScript without needing a page refresh? I'm currently struggling with appending an MDBootstrap <select> tag, which involves more than just adding a child element. Instead, I have to remove the element an ...

Guidelines for choosing input using jQuery

I am looking to retrieve the value of an input using jQuery. Specifically, I need to extract the value of a hidden input with name="picture" when the user clicks on the حذف این بخش button by triggering the function deleteDefaultSection( ...

What is the easiest way to modify the color of a basic PNG image in a web browser?

While working on a website project, I encountered instructions for mouseover styles in the design that got me thinking: It's straightforward to achieve with javascript or css image swapping... but here's the catch. There will be multiple icon li ...

Having difficulty sending a value with %45 to a REST API

Currently, I'm encountering an issue within my ASP.NET MVC 5 application. The problem arises when I send the following JSON data to a third-party API, which includes a password field: "{\"operation\":{\"Details\":{\"RESOURCE ...

Creating a vertically scaling div with full height using Bootstrap 3

I am facing an issue with creating a full-height website using Twitter because the body min-height set to 100% seems to be causing problems. Here is my CSS code: html{ height:100%; } body{ min-height:100% } #main{ min-height:100%; } And here ...

Incorporate a link to an image following a click event toggle using Jquery

I managed to create a code snippet that toggles between two images when clicked, thanks to some assistance from stackoverflow. However, I am now looking to add a link to the second image that redirects users to another webpage, like The App Store. My ques ...

Hide bootstrap card on smaller screens such as sm and md

Utilizing the Bootstrap 4.1 card component, I showcase categories within the right sidebar - check out a sample image of the card here: Card example image; When viewing on smaller screens, it's preferable to collapse this large card as shown in this ...

Having trouble getting the carousel slider to function properly on meteor?

I am currently working on my portfolio page using Meteor, and I want to include a carousel slider gallery. The problem I'm facing is that while the first gallery works fine, the second one does not load correctly and just displays a list of pictures. ...

Establish the Image Aspect Ratio within an Unordered List

I'm having some trouble adjusting the aspect ratio of an image within a ul. Currently, the image is displaying too large in terms of height and I've tried various solutions, such as wrapping it in another div and applying padding-top: 56.25%; to ...

Learn how to update a fixed value by adding the content entered into the Input textfield using Material-UI

I made a field using the Input component from material-ui: <Input placeholder="0.00" value={rate} onChange={event => { this.setState({ `obj.rate`, event.target.value }); }} /> Whenever I input a rate into this field, ...

Tips for creating a navigation bar that bypasses body padding in HTML and CSS

I have set padding in my 'body' tag, but I want my top navigation bar to cover the entire page without being affected by it. I attempted to fix this by setting the width to 100% and using negative padding and margin values, but it did not work a ...

Modify the text and purpose of the button

I have a button that I would like to customize. Here is the HTML code for the button: <button class="uk-button uk-position-bottom" onclick="search.start()">Start search</button> The corresponding JavaScript code is as follows: var search = n ...

The use of non-breaking space symbol ( ) does not function properly in Weblogic 14

After upgrading from Weblogic 12 to Weblogic 14 Server, I encountered a change in behavior. Previous Status Everything was functioning properly before the update. When requesting an html page with &nbsp; whitespaces, the server would include these spa ...