What is the best way to ensure each row of an HTML table has an equal number of cells, including blank cells if necessary?

I am currently facing a challenge with an HTML table that has data imported using *ngFor. Some rows in the table have 12 pieces of data, resulting in 12 columns, while others only have 2 pieces of data and therefore only 2 columns.

My attempt to use empty-cells: show in CSS did not work as expected because the extra cells I wanted to display remain hidden due to lack of data.

Adding extra empty <td> elements also did not solve the issue since using *ngFor caused these empty cells to be added at the end of every row, leading to uneven columns.

To illustrate this problem, I created a demo on StackBlitz. In this example, my goal is to give all cells a grey background even if they are empty.

I am seeking advice on the best approach to achieve this desired outcome. What would be the most effective solution?

htmlcssangular

Answer №1

To display a table with merged cells, you can utilize the attributes colspan and rowspan:

<table>
    <tr>
        <th colspan="2">65</th>
        <th colspan="2">40</th>
        <th colspan="2">20</th>
    </tr>
    <tr>
        <th>Men</th>
        <th>Women</th>
        <th>Men</th>
        <th>Women</th>
        <th>Men</th>
        <th>Women</th>
    </tr>
</table>

For more information on how to use colspan and rowspan, check out:

If you prefer not to use tables, you can create layouts using DIVs along with grid systems or Flexbox.

Explore CSS Grid further here: https://css-tricks.com/snippets/css/complete-guide-grid/

Learn about CSS Flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Check out an example with empty cells here: https://codepen.io/fabiozanchi/pen/QXrPbV

Answer №2

I believe this is the solution you have been searching for

<table class="table table-bordered">
<tr>
    <th colspan="2">65</th>
    <th colspan="2">40</th>
    <th colspan="2">20</th>
</tr>
<tr>
    <th>Men</th>
    <th>Women</th>
    <th>Men</th>
    <th>Women</th>
    <th>Men</th>
    <th>Women</th>
</tr>
<tr>
    <th>Men 1</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>Women1</th>
    <th>&nbsp;</th>
    <th>Women2</th>
</tr>
</table>

Answer №3

Make changes to your table using the code provided below for optimal performance:

<table id="table">
 <tr>
   <td *ngFor = "let col of tableColumns">{{col}}</td>
 </tr>
 <tr *ngFor = "let data of array">
   <td *ngFor = "let col of tableColumns; index as i">{{data.split(',')[i]}}</td>
 </tr>
</table>

To add a header row, use the following array:

tableColumns = ['HEADER1', 'HEADER2', 'HEADER3', 'HEADER4'];

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

Sliding Dropdown Menu with Dynamic Title Change Upon Selection

I'm having an issue with a dropdown menu on hover that slides down and then back up. The active list item serves as the title of the dropdown. When a user clicks on an <li>, it becomes active and receives the class active-markup-style which sets ...

jqueryhtmlcss

The application appears differently on a phone compared to how it looks on the ripple platform

Recently started experimenting with Apache Cordova, attempting to create a basic application. Here is how it looks in Google Chrome using Ripple for PhoneGap/Cordova emulation: https://i.sstatic.net/2MSwl.png When I click on the button, this is the resul ...

androidhtmlcsscordovaripple

Menu/navigation bar designed with floating lines and an array of color options

I'm currently working on implementing this specific menu into my Wordpress site. My main concern is figuring out how to customize the hover effect for each navigation item. Currently, the float line changes to red (background-color:#800; height:2px;) ...

javascriptjquerycssmenu

The panel's placement shifts when the browser window is expanded

Currently, the issue I am encountering involves an ASP.NET website with a header, sidebar, and additional right sidebar. When I resize the browser window, the left sidebar overlaps the content page, resulting in mixed-up controls. Please refer to the image ...

htmlcssasp.net

Is there a way to generate a perfectly proportioned rectangular treemap using d3.js?

When attempting to generate a rectangular treemap in d3.js, I encountered an issue where the resulting shape was not as desired. There were instances of missing data and empty spaces within the rectangular treemap. Upon investigation, I found that removin ...

javascripthtmlcssd3.jsdata-visualization

Is there a way to generate a hierarchical list menu using strings?

Within an HTML Application (HTA), I am utilizing vbscript to retrieve a list of subnet locations which is output as text in the following format: Chicago Denver Dallas Dallas/North Dallas/South Dallas/West Dallas/West/Building1 Dallas/West/Bu ...

javascriptjqueryhtmlvbscripthta

Oops! An unexpected error occurred: TypeError - Seems like _this.searchElementRef is not defined

I recently implemented the Google Place API in my project by following this tutorial. However, I encountered the following error: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined The issue seems ...

angularjsangular

Enhance text by hovering over it

I am currently working on implementing a unique feature using jQuery and CSS. Rather than just inheriting the width, I want to create a magic line that extends to the next index item. Scenario: 1: Hover over Element one ELEMENT ONE ELEMENT TWO ELEM ...

javascriptjqueryhtmlcss

Instructions for making dropdown menus that dynamically reduce their options as you make selections:

I have an HTML form structured like this: Within the dropdowns, there is a uniform list of choices: Option 1, Option 2, Option 3. Users must select a value for each key, which currently functions correctly: Yet, I am seeking to enhance this functionality ...

javascriptjqueryhtmlknockout.js

Switching the background image with a single click and reverting it back with a double click using jquery

I am working on a project with multiple div elements which need their background images to change upon clicking and revert back to the original image when clicked again. Below is the CSS code for one of the divs, including its Class and ID: .tab_box { wid ...

jquerycssimageonclicktoggle

Hold off until the commitments have been fulfilled before determining if they are true or false

I need assistance with waiting for a promise to return within a method. public async loginOffline(username: string, password: string) { const data = await this.database.getItem('currentUser', 'login'); this.userLogin = data; ...

javascriptangulartypescript

What methods can be used by CSS or JavaScript to respond to the various stages of the Azure B2C Email Verification process?

Our Azure B2C custom policy includes email verification during sign-up to combat spam accounts. The default email verification process in B2C can be cumbersome as it requires users to complete multiple steps on the same form: Enter email. Send verificati ...

javascriptcssazureazure-ad-b2cazure-ad-b2c-custom-policy

Embarking on your ABLY journey!

Incorporating https://github.com/ably/ably-js into my project allowed me to utilize typescript effectively. Presently, my code updates the currentBid information in the mongodb document alongside the respective auctionId. The goal is to link the auctionId ...

angulartypescriptably-realtime

Updating Button Text Upon Click

I am looking to create a webpage filled with riddles. After each riddle, there will be an answer button that, when clicked, reveals the answer. Clicking the button again should hide the answer. I attempted to implement this functionality using Javascript, ...

javascriptjqueryhtmlcss

Activate the button to effortlessly load pages with a visually engaging animation

I have been facing a problem for the past couple of days. I need help with achieving a specific functionality on my website. When button1 is clicked, I want to load the page in a div class named "loadpage" with an animation coming from the left. Similarl ...

jquerycssajaxhtml

Angular 2 - Dependency Injection failing to function

I have created two different implementations for an interface and assigned them as providers for two separate components. However, I am encountering the following error: Error: Can't resolve all parameters for ChildComponent: (?). What could be the i ...

angulartypescript

Using CSS3 column-count for layout purposes

I am working on a div with a width of 100% that contains about 10 images, each with different widths and sizes. I want these images to float seamlessly around each other without all being resized to the same column width. Is there a way to achieve this so ...

imagecssresponsive-design

How can I adjust the positioning of List Items (LI) when using an image as a bullet point?

Looking for some CSS help! .ul{ list-style-image:url(/images/bullet.png) } I have a 20 x 20px bullet.png, but the text is displaying at the bottom of the image. I want to center the text inside the image without moving the entire bullet. Any suggesti ...

csslistitem

What dimensions are optimal for images on a Responsive web design?

In the process of making our website responsive, I have a question regarding image sizes. If I want images to fill the entire screen, excluding the navigation header, what specific dimensions should these images be in order to display correctly on all type ...

cssimageresponsive-design

Hover and hover-off functions in navigation menu

html <div class="hidden-nav"> <h4>lorem</h4> <ul class="decor-menu-list"> <li><a href="#">123</a></li> <li><a href="#">123</a></li> <li><a hre ...

javascriptjqueryhtmlcss