What could be the reason for the CSS property of margin-right not being applied in the HTML code?

New Code:

table {
  border-radius: 3px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
<div class="table-responsive-md">
  <table class="table table-striped table-bordered table-hover table-sm text-light">

    <caption>The Weekly Task List</caption>

    <thead class="thead-dark">
      <tr>
        <th>#</th>
        <th>Date Started</th>
        <th>Due Date</th>
        <th>Task Description</th>
      </tr>
    </thead>

    <tbody>
      <tr class="bg-primary">
        <td>1</td>
        <td>03/15/2022</td>
        <td>03/25/2022</td>
        <td>Submit Report</td>
      </tr>
      <tr class="bg-dark ">
        <td>2</td>
        <td>03/15/2022</td>
        <td>03/25/2022</td>
        <td>Prepare Presentation</td>
      </tr>
    </tbody>
  </table>
</div>

I have an issue with setting the right margin for my table. The left margin works fine, but no matter what I try - changing it to margin-right: 50px or 5%, nothing seems to work. Can you please suggest a fix? Thanks!

Answer №1

.table-responsive-md{
  padding-left:5px;
  padding-right:5px;
}
<div class="table-responsive-md">
  <table class="table table-striped table-bordered table-hover table-sm text-light">

    <caption>The to-do List</caption>

    <thead class="thead-dark">
      <tr>
        <th>#</th>
        <th>Date of Declaration</th>
        <th>Date of Finish</th>
        <th>Target To Be Nailed</th>
      </tr>
    </thead>

    <tbody>
      <tr class="bg-primary">
        <td>1</td>
        <td>13 Nov 1998</td>
        <td>13 Nov 2019</td>
        <td>Meet her</td>
      </tr>
      <tr class="bg-dark ">
        <td>2</td>
        <td>24 Dec 1995</td>
        <td>24 Dec 2025</td>
        <td>Complete the project</td>
      </tr>
    </tbody>
  </table>
</div>

Since the table is full width, the right margin is not functioning properly. By using left and right padding on the parent tag, you can achieve the desired result.

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

issue arising where the table's border is not displaying

I'm confused about why the border of the first tbody tr's td is not visible. https://i.stack.imgur.com/Fwlv7.png I can't see any reason why the border is not showing up. Here's what I've figured out: If the natural height of th ...

Advantages and drawbacks of utilizing both of these HTML codes for generating an image

Could you explain the distinction between creating the image in these two code snippets? <link href="img/favicon.ico" rel="icon" type="image/png"> compared to initiating it using a simple <img /> tag I'm t ...

Align the Font Awesome icon and text in the middle vertically within an <a> tag/router-link

My b-button acts as a router-link/a tag, and I can't seem to get the content centered the way I want. I'm aiming for the text to be below my font awesome icon, with both elements aligned both horizontally and vertically, but nothing I've tri ...

Exploding particles on the HTML5 canvas

I've been working on a particle explosion effect, and while it's functional, I'm encountering some issues with rendering frames. When I trigger multiple explosions rapidly by clicking repeatedly, the animation starts to lag or stutter. Could ...

`Angular 9 template directives`

I am facing an issue with my Angular template that includes a ng-template. I have attempted to insert an embedded view using ngTemplateOutlet, but I keep encountering the following error: core.js:4061 ERROR Error: ExpressionChangedAfterItHasBeenCheckedEr ...

The HTML content I created is too large for the screen and is extending beyond its borders

The navigation bar and footer on my HTML page adjust themselves according to the screen width, but the main content is not adjusting properly. I tried using a media query for mobile resolution (517px), but when I tested it on a PC with a smaller screen wi ...

Utilizing JavaScript to enable HTML checkbox to be checked automatically

I am currently working on a constructor that generates checkboxes within a loop. My issue lies in attempting to set these checkboxes as checked, however, it doesn't seem to be functioning correctly. Below is the code snippet: funct ...

Unusual CSS behavior discovered while implementing horizontal scrolling navbar with overflow-x

I've been working on a navbar that will scroll horizontally when it exceeds the width of its parent container. It features a bottom border with a different color for the active link. Using a negative margin to overlap them works well, but as soon as ...

jQuery, the magical tool that can make forms disappear and reappear in a blink

As the heading suggests, here is the code I attempted. The forms are designed to be displayed one after the other, with each subsequent form's appearance being determined by the information provided in the previous forms. $(document).ready(function() ...

How to Adjust CSS Animation Background to Fully Cover Responsive Height

Hi there! I've been working on adding some CSS code to my ReadyMag project, but I'm having trouble with odd aspect ratio browser windows. The code I have is almost doing what I want, but it's not covering the full width and height. How can I ...

Incorporating a touch of dark opacity into an image

Check out the layout of my webpage here: https://i.sstatic.net/Ap4nx.jpg The background image I used is this one: https://i.sstatic.net/dIhLt.png I am trying to achieve a black transparent overlay on the image, similar to this: https://i.sstatic.net/FMdi ...

What steps do I need to follow to create a 3D shooting game using HTML5 Canvas?

I'm eager to create a 3D shooter game with HTML5 Canvas, focusing solely on shooting mechanics without any movement. Can anyone provide guidance on how to accomplish this? I've looked for tutorials online, but haven't come across any that m ...

Bootstrap datepicker and timepicker icons are misaligned

While working on a Date Picker and Time picker in Bootstrap 4 with bootstrap-datepicker.js and bootstrap-timepicker.js, I encountered an issue. The calendar and time icon are not displaying correctly; they should be inside the input button but instead appe ...

Setting the height to 100% will not maintain the aspect ratio of the image

Having trouble with Blogger once again as I try to style the homepage. I am aiming to feature snippets and titles in tiles with a fixed height of 200px but a dynamic width for responsive design. My goal is to display the first image and a "read more" butt ...

Why Aren't Static Positioned Divs Aligning at the Parent's Top?

I am facing an issue where I have 3 divs with content inside them, and the two smaller ones are aligning at the bottom of the larger div. Despite no presence of margin or padding, this alignment mystery has left me puzzled. body { width: 100% } .cont ...

Ways to eliminate padding on narrow screens with bootstrap 5.2 features

I have a container with a padding of 5 (p-5) applied to it. However, I am looking for a way to automatically remove the padding when the screen size is small, without adding more CSS rules. Is there a solution using only bootstrap classes? <div class= ...

Transform the page into a Matrix-inspired design

I decided to transform the appearance of my web pages into a stylish The Matrix theme on Google Chrome, specifically for improved readability in night mode. To achieve this goal, I embarked on the journey of developing a custom Google Chrome extension. The ...

The leaking of angular-material CSS onto other divs is causing unexpected styling

I am having trouble incorporating Angular Material's md-autocomplete into my angular application. I have already customized the CSS being used in my application, but when I add the Angular Material CSS, it messes up the entire page. Even when I tried ...

Identify the position of a mouse click event when dots overlap

Experience this live demo on CodePen by visiting it here. 1) When you click on the grid, a first red point will be added. 2) Click on the grid again to add a second red point. 3) By clicking back on the first red point, you may notice that the coordinat ...

Adding HTML elements to a Vue Tooltip

Does anyone know how to implement a tooltip in Vue for a table cell that has more than 22 characters in its content? I was looking into using the v-tooltip library (https://www.npmjs.com/package/v-tooltip) Setting the tooltip's content with a simple ...