CODEWITHSUNDEEP
htmlcssangular
Thinker
Thinker

Reputation: 5356

css style table as a scale

I have a for loop that should populate a table as in following diagram:

enter image description here

Age is is in the first row which is a table header, then there are three rows and each has three columns. First row contains images, second is simply a horizontal line (must not be a row, could be bottom border of previous row), and the third is numeric scale i.e. 18-29, 30-50, 50+.

My HTML:

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

and css:

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

How can I apply css to it to look like in the diagram? Right now I get like following:

enter image description here

Upvotes: 0

Views: 128

Answers (1)

Souhail Ben Slimene
Souhail Ben Slimene

Reputation: 667

it should work like this

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

If you don't know the the exact columns number you can use age_range.length, in Angularjs it's done like this colspan="{{age_range.length}}" ,it's probably the same 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>

Upvotes: 1

Related Questions