Eliminate the standard cell padding in nested HTML tables

In my setup, there is a parent table where each td tag in the tr tag contains a child table. Specifically, as shown in the example with Data WS-C3.... in the picture.

[![<table class="table table--bordered table--nostripes table-top">
    <thead>
       <th>PID</th>
       <th>Base Licence</th>
     </thead>
     <tbody>
        <tr>
           <td>
               <a (click)="addNewPid()">Add New PID</a>
           </td>
           <td><a (click)="addNewPid()">Add New PID</a></td>
        </tr>
        <tr>
           <td>
              <custom-table here ></custom-table>
           </td>
           <td>
               <custom-table here></custom-table>
           </td>
        </tr>
    </tbody>
</table>]

One issue I encountered is that due to having fewer elements in the right column, there is default padding being added to match the size of the left column. My goal is to display those 3 rows of the right column immediately after "Add new PID". However, I am struggling to remove the default padding present in the right column. I attempted setting span=0 but it did not work. Any suggestions or ideas would be greatly appreciated.

https://i.stack.imgur.com/3OUz3.png

Answer №1

Give this CSS a shot:

tr td {
  margin: 0px !important;
}

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

What is the best way to create a layout for Flexbox project boxes with three boxes per row?

My project cards are displaying in a single horizontal line and expanding infinitely to the right, rather than appearing in rows of three as intended. This causes them to extend outside the visible area in a long horizontal strip. See the issue in action ...

Is the text alignment off?

I've been immersed in creating a website, but I encountered an issue for which I can't seem to find the solution. Check out my text alignment here (test) - it's not aligned all the way to the left of the content Here is the HTML code: < ...

Submitting a form and using Ajax to upload an image

Is there a way to submit an image file to php using ajax without assigning the file to a variable with onchange event? I've tried triggering the request on submit click, but keep getting the error message: "cannot read property 0 of undefined." <ht ...

Ways to modify the source of images that do not possess a class or ID using JavaScript

I'm struggling to change the source of the img element using JavaScript and Ajax. The img tag doesn't have any IDs or classes, making it difficult for me to select and update the src. Can anyone provide guidance on how I can accomplish this? Belo ...

Establish the lowest possible height for Angular Material Expansion Panel Content

Is there a way to specify a minimum height for the content of an Angular Material expansion panel when it is open? I have searched for examples on setting the expandedHeight and collapsedHeight for the header, but not for the content itself. The Angular Do ...

JavaScript not redirecting to HTML page as expected

I have developed a basic login page that makes an Ajax request to the backend. However, I am experiencing difficulties with redirecting the page upon successful login. The redirect function only seems to work 1 in 15 times, and I'm unsure of the reaso ...

Record modified fields using Angular Reactive Forms and store them in a list

Is there a method available that can identify and return the fields that have been modified within a form? I am looking to generate a list of string values for the changed fields. I am dealing with a complex form containing approximately 30 different fiel ...

It appears there was a mistake with [object Object]

Hey there, I'm currently working with Angular 2 and trying to log a simple JSON object in the console. However, I keep encountering this issue https://i.stack.imgur.com/A5NWi.png UPDATE... Below is my error log for reference https://i.stack.imgur.c ...

Tips for inserting an HTML element within an exported constant

I need help formatting an email hyperlink within a big block of text. Here is the code snippet: const myEmail = '<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4b564f435e424b6e4b564f435e424b004d41 ...

Interactive image grid with adjustable description field per image upon selection

My goal is to create a grid of images with a single text field below the grid. This text field should display the description of the image that was last clicked. The grid is implemented using floating divs within a main div, as shown in the code snippet be ...

Utilize the v-for second argument in VueJS 2 to showcase the index and index+1

For a VueJS 2 project, I am tasked with enhancing the display of the first and second elements in an array by making them stand out from the rest. To achieve this, I am utilizing the v-for syntax to iterate over a child component within a parent component. ...

Retrieve parent route parameters from a dynamically loaded route component

Struggling to access the parent route params in a lazy loaded route component using activatedRoute.parent.params. Despite this not working, I have managed to find a solution that involves fetching the value using an array index number which feels like a &a ...

How come my columns are stacking on top of each other instead of being positioned side by side?

I am having an issue with my products displaying below each other instead of next to each other in their own column. How can I adjust the layout so that they appear side by side? View image <tr> <th>Month</th> <div *ngFor="let p ...

Ensure that the background div extends all the way to the bottom of the page

Is there a clever CSS technique that allows a div to extend all the way to the bottom of the screen without displaying any visible content inside? Or am I better off using JavaScript for this purpose? Thank you, Richard ...

I am encountering 404 errors when attempting to load Angular2 files using Express - what could be causing this issue?

Having experience with using Express, I am attempting to apply the guidelines provided here to the express template. After generating the latest Express project, I included the following in my package.json file. "dependencies": { "angular ...

What is the method to set precise values on a range slider?

Currently, I am developing a PHP website that requires a slider for displaying the years of publications. In essence, I need the slider to navigate through the different years when the publications were released. // Database connection and other PHP code ...

Troubles with the placement of elements in a website due to

I have set up a table using PHP to display data in two columns from an XML feed. The first column appears correctly, but the second column is being cut off. For example, you can see the issue here: http://www.example.com Below is the CSS I am using: td ...

Issues with applying panelClass on panels in ng2-bootstrap library for Angular 2

In the ng2-bootstrap documentation, it mentions a panelClass annotation that can be used for panels. However, I am having trouble getting it to work properly. Here is the code I am using: <accordion> <accordion-group [panelClass]="panel-primary" ...

Having trouble stacking the video iframe over the menu content despite setting the z-index correctly

I can't seem to figure this out. I attempted adjusting the z-index on the iframe element, but it continues to be positioned behind the menu on this page. Lowering the z-index on various sections of the navigation menu hasn't helped either. link ...

Is the hidden element still viewable even with display: none?

Can you explain why the icon is still visible when the display is set to none? .toc.item { display: none; } <a class="toc item"><i class="sidebar icon"></i></a> ...