Create a table with CSS styling that resembles a measuring scale

I am working on a for loop that will populate a table, similar to the diagram below:

https://i.sstatic.net/xbZ8u.png

Age is displayed in the first row as a header, followed by three rows with three columns each. The first row contains images, the second shows a horizontal line (not an actual row but could be the bottom border of the previous row), and the third row displays a numeric scale: 18-29, 30-50, 50+.

This is my HTML code:

<table>
    <tr>
        <td>Age</td>
    </tr>
    <tr *ngFor="let age of age_range">
        <td>{{age}}</td>
    </tr>
</table>

And this is the CSS I have so far:

table , tr {
    border-bottom: 1px solid;
}

How can I adjust the CSS to make it look like the diagram? Currently, it appears like this:

https://i.sstatic.net/BDYxi.png

htmlcssangular

Answer №1

Here is an example of how it should function:

<table >
<tr>
    <td colspan="3">Age</td>
</tr>
<tr>
    <td *ngFor="let age of age_range">{{age}}</td>
</tr>

If you are unsure about the exact number of columns, you can use age_range.length to determine this. In Angularjs, it would be implemented like this: colspan="{{age_range.length}}". The process is likely similar in Angular 2.

.border-bottom {border-bottom: 1px #ccc solid;}
table {width: 100%;}
<table>
  <tr>
    <td colspan="3">Age</td>
  </tr>
  <tr>
   <td class="border-bottom">11111</td>
   <td class="border-bottom">22222</td>
   <td class="border-bottom">33333</td>
  </tr>
</table>

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 could be the reason for the improper display of this?

I am in the process of creating an e-commerce website where users can add products to their virtual shopping carts. However, I am facing an issue with displaying the correct button ('Add to Cart' or 'Remove from Cart') based on whether ...

pythonhtmldjango

The function is triggered twice with a single click of the mouse

In order to display a boolean value as either "active" or "inactive" in the UI, I created a function to save the boolean based on the selected item instead of directly saving it to the $scope. HTML <ui-select ng-model="statusTemp" id="sStatusAnz" name ...

javascriptjqueryhtmlangularjsforms

Sending the JWT header while using Stripe checkout: A step-by-step guide

I am currently working on setting up a webpage using HTML that will later be integrated with Vue.js. My goal is to include a Stripe checkout form/script/button and have the ability to submit the form with a predefined action that will send the data back to ...

javascripthtmlnode.jsstripe-payments

Featuring a visual arrangement of categorized images with AngularJS for an interactive display

As I work on developing a web application with Angular, my goal is to create a grid layout that organizes items by category. Each row will represent a different category. Below is an example of the code structure I have in place: <ion-item ng-repeat="i ...

javascripthtmlangularjs

I am attempting to apply a class to #cart-total-remove using the location function, but despite trying various methods, I have been unable to make it work

This function is responsible for updating the cart successfully success: function(json) { // Setting a timeout to ensure total update setTimeout(function () { $('#cart > button').html('& ...

javascripthtmlcssjsonajax

Automatically integrating Nivo Lightbox into your website

I incorporated Nivo Lightbox into my website, seamlessly integrating all images with the plugin using the following code: <div class="portfolio-item"> <div class="portfolio-thumb "> <a class="lightbox" data-lightbox-type="ajax" title="Strat ...

javascriptjqueryhtmlcsstwitter-bootstrap

Learn the process of playing a video in an HTML5 video player after it has finished downloading

// HTML video tag <video id="myVideo" width="320" height="176" preload="auto" controls> <source src="/server/o//content/test2.mp4" onerror="alert('video not found')" type="video/mp4"> Your browser does not support HTML5 vid ...

javascripthtmlvideovue.jsvideo-player

Step-by-step guide to vertically centering a single column in a two-column grid layout using Materialize CSS

I am trying to create a layout with two columns, where text is on the left side and a large image is on the right. I am utilizing col s12 l6 to ensure that these elements stack on top of each other on smaller screens. In the design, I need the text on the ...

htmlcssmaterialize

Tips for implementing a CSS class on a select dropdown in multiple web pages

Having multiple dropdowns (select boxes) on my website has led me to desire different alignments for them. For instance, I would like one dropdown to be centered on a specific page while another should appear on the right side of a separate page. Since my ...

css

Discover the title of the selected checkbox

Looking for some help with a tricky problem I've encountered. I have created a script that identifies labels with a 'selected' class on their parent element, clones them, and appends them to an active list to create a 'Filtered Items&a ...

javascriptjqueryhtmlcss

How can I present the enum type in a dropdown menu using Angular 5 and TypeScript?

In my Angular 5 application, I have defined an enumeration constant called DateRange. export enum DateRange { TODAY = 'Today', THIS_WEEK = 'This Week', THIS_MONTH = 'This Month', THIS_YEAR = 'This Year' } ...

angulartypescript

Optimize the size of div elements using jQuery

I am looking for a way to minimize certain div elements on my webpage using symbols from font-awesome instead of the traditional "-" and "+". However, I am having trouble inserting the classes of the icons into my code. I attempted replacing the .html meth ...

jqueryhtmlminimize

Issues with radio buttons not functioning or being able to be selected in Internet Explorer

My radio buttons are functioning perfectly in Chrome, Firefox, and Safari, but for some reason, they are not selectable in Internet Explorer (Version 7). Any suggestions on how I can resolve this issue? HTML: <label> <input type="radio" name ...

htmlcssinternet-explorerradio-button

Steps to display a div element periodically at set time intervals

I've created a user greeting message that changes based on the time of day - saying Good Morning, Good Afternoon, or Good Evening. It's working well, but I'm wondering how I can make the message hide after it shows once until the next part o ...

javascriptphphtmlcsssetinterval

Embedding images using a blob or base64 format does not function properly on iOS devices

I'm facing an issue with setting the src of an img tag to display an image. The code snippet below works fine on android, mac, and windows, but it is not functioning correctly on iOS: let base64Image = pageModel.image; this.$currentPageImage.src = `da ...

javascripthtmltypescriptwebkit

How to align text vertically in a cell alongside a button in another cell using Bootstrap

In my table, I have 3 columns of text and a fourth column with a button. The alignment of the text in the cells does not match the button text vertically due to the button having a vertical-align value of 'middle'. To align them properly, I curre ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Having trouble implementing ng2-charts in Angular 4 when using shared components

Using angular 4.0.0, angular-cli 1.2.1, and ng2-charts 1.6.0 has been a smooth experience for me so far. However, I encountered an issue when trying to incorporate ng2-charts into "shared" components. In my setup, I have a shared-components.module that is ...

angularng2-charts

I am experiencing an issue where the custom form validation directive in AngularJS is not functioning properly within my modal

To enhance the validation of my input boxes, I created a custom directive called nx-validate. This directive is designed to be added to a bootstrap div.form-group, which will then check if the <input/> field is $dirty or $invalid, and apply the appro ...

javascriptangularjshtmltwitter-bootstrapangularjs-directive

Angular 7: Exploring the Best Way to Modify Query Parameters While Subscribing

When attempting to convert query parameters to integers within a subscription, I am encountering an issue where the code stops executing after any transformation of query parameters. This occurs regardless of whether the parameters are transformed to integ ...

angularasynchronousrxjsquery-string

Encountering issues with resolving all parameters when attempting to dynamically generate a component in Angular

As I attempt to dynamically insert a BlockComponent into a GridLayoutComponent, an error is thrown: Uncaught Error: Can't resolve all parameters for BlockComponent: (?, [object Object]). This issue arises upon page load and stems from the addBlock fun ...

angulartypescript