I'm looking to split this div into three equal columns to organize the list data in a three-table format

When printing a list of data in observable format, I want to divide the screen into 3 columns to resemble a table. However, each cell is not occupying the same length, causing alignment issues.

 <div class="card">
                    <div class="card-header main-header">
                        <h3 style="text-align: center;font-weight: 600;">Roles</h3>
                    </div>
                    <div class="card-header">
                        <span class="list-column">RoleName</span>

                        <span class="list-column">Description</span>

                        <span class="list-column">Action</span>
                    </div>
                    <ul class="list-group">
                        <li *ngFor="let item of userRoles; let i = index">
                            <span class="list-item">{{item.roleName}}</span>
                            <span class="list-item">{{item.roleDesc}}</span>
                            <span class="list-item">
                                <a href="">Edit</a> /
                                <a href="">Delete</a> /

                            </span>
                        </li>
                        <br />
                    </ul>
                </div>

This can be solved by adding some CSS styles:

ul {
  list-style-type: none;
  padding-top: 20px;
}
.list-column {
  font-size: 15px;
  margin: 140px;
}

.list-item {
  font-size: 12px;
  margin: 140px;
  align-items: center;
}


.wrapper {
  width: 100%;
  font-size: 0;
}
htmlcssangular

Answer №1

To achieve a table-like appearance for your container, you can apply the following CSS style:

.card{
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr 1fr;
  display: grid;
}

This will organize child elements within the card into groups of three with equal sizes.

If you want the first column to occupy 50% of the total width, you can adjust the styles like this:

  grid-template-columns: 2fr 1fr 1fr;

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

Exploring JSON data in real-time

My goal here is to utilize the variables retrieved from the route to determine which blog to access from the JSON file. The JSON file consists of an array of sections, each containing an array of blogs. Although the code works flawlessly when I manually s ...

jsonangulartypescript

Struggling to figure out the method for obtaining css selectors for scraping in scrapy

Struggling with scraping a website and figuring out how css selectors work in Scrapy. The css in question: https://ibb.co/eJeZpb Here are some standard css selectors: .css-truncate-target .message .js-navigation-open time-ago For scrapy, you would need ...

pythoncsspython-3.xscrapy

Sending an ID from an array within a *ngFor loop to a different component in Angular: a step-by-step guide

I have a collection of items that I loop through using ngFor. My goal is to pass all its attributes to another component. I attempted to accomplish this with the following code: *ngFor='let item of postList [routerLink]="['/detailed-post&ap ...

htmlangulartypescript

Place elements at the bottom of a webpage on any browser or device with just a single page

I am in the process of creating a website that features a top menu and a background image with text on the home page, covering the full screen. However, I also need to include 3 blocks at the bottom of the screen that should display consistently across all ...

htmlcss

Repositioning the disclaimer section in the aside section to the final page of a pagedown HTML resume

Using the pagedown template resume as a guide, I am interested in relocating the disclaimer section (currently at the bottom right of the first page, stating "This resume was made with the R package pagedown. Last updated on 2021-08-18.") to the bottom of ...

cssrr-markdownrstudiopagedown

Choosing the *exact* element with jQuery

As a newcomer to jQuery, I'm attempting to apply a specific class to an individual image when hovering over a button. However, my initial approach did not yield the desired result. The issue is that there are multiple .service sections, each containi ...

javascriptjquerycsshtml

What is the best way to ensure the second navbar stays at the top when scrolling, after the first one?

Looking for a solution to create a navbar with two distinct sections for contact info and the menu. The goal is to have the contact info disappear when scrolling down, while the menu remains fixed at the top of the page. When scrolling back up, the menu sh ...

htmlcss

Press a Selenium button that is not categorized as an input element

I have the following HTML snippet: <div _ngcontent-fsi-c26="" class="col-xs-12 ng-star-inserted" style="margin-top: 3%;"> <div _ngcontent-fsi-c26="" class=" col-xs-offset-1 c ...

c#htmlselenium-webdriverweb-scrapingconsole-application

What is the solution for addressing the size problem of the image within the modal?

img1 img2 Upon clicking on the modal, it displays the image similar to a lightbox, but the issue arises when the image becomes scrollable and does not fit the screen properly. Take a look at the code below: HTML <div class='row'> ...

htmlcsstwitter-bootstrapbootstrap-4

CSS - Struggles with Keeping Div Positioned to the Right of Another

I'm facing a simple layout issue here - trying to align two divs next to each other. Image on the left, text on the right. However, when the text is too long, it pushes the div down instead of wrapping around. I want the cs-summary div to automaticall ...

csscss-float

Angular mouseenter event delay not functioning after initial trigger

Currently, I am attempting to create a delay for the mouseenter event when the user hovers over a div. The goal is for the video to start playing only after the user has hovered for at least 1 second. Initially, everything works as expected, but after the ...

javascriptangulartypescriptrxjs

Angular Material throws errors when there are missing dependencies

I encountered an issue while trying to set up angular material in my project: Uncaught TypeError: Object(...) is not a function at bidi.es5.js:87 at Object../node_modules/@angular/cdk/esm5/bidi.es5.js (bidi.es5.js:89) at webpack_requir ...

angularnpmdependenciesangular-material

adaptive height that scales with content proportionally

I am looking to achieve a responsive height based on the content inside my container. For example, I want the height of the container to adjust according to the text it contains. <!DOCTYPE html> <html lang="en"> <head> < ...

htmlcss

Unable to update navigation link color in Bootstrap 4 styling

<nav id="section_navbar" class="navbar navbar-expand-lg fixed-top"> <div class="mx-auto my-2 order-0 order-md-1 position-relative"> <div id="top_logo" class="container-fluid"> <span>VirtualQR</ ...

htmlcsstwitter-bootstrapbootstrap-4

Is it possible to utilize @ViewChild() or a similar method with a router-outlet? If yes, how can it be

There is a recurring situation I encounter where I find myself wanting to access a child component located on the opposite end of a router outlet instead of through a selector: For example: <router-outlet></router-outlet> NOT: <selector-na ...

angularangular2-routingangular2-services

What makes my website image unresponsive?

As a newcomer to the world of programming, I recently embarked on the journey of learning about it just last month. Right now, I am fully immersed in creating my new website for a school project. However, I seem to be facing an issue with making the image ...

jqueryhtmlcssiosbootstrap-4

When accessing nested objects in Props in Vue.js, an error may occur if the property of null/undefined

When I make an axios call, I receive an object which I pass to a child component. However, when I attempt to loop through the object in the child component to access a property of another nested object, I encounter an issue where the property is showing as ...

javascripthtmlvue.jsnuxt.js

Clicking two times changes the background

I am facing an issue with three boxes on my website. Each box is associated with a corresponding div. When I click on any box, the div displays and the background color turns red. However, when I click on the same box again, the div disappears but the back ...

javascripthtmlcss

Looking for Efficiency in Basic JavaScript Arithmetic Operations

I'm having trouble figuring out how to display a total price after a selection is made. My goal is to take the selected value, multiply it by 100, and then use the updateTotal function to show the total. // Gather Data & Prices for Updating Dynamic P ...

javascripthtmlformsfunction

Conceal the div using a sliding left animation

After researching extensively, I have been unable to find a solution to my problem. In order to better illustrate my issue, here is the code for reference: jsfiddle I am looking to create a sliding effect for a calc div where it moves to the left, simila ...

jquerycss