I'm trying to put a width to an <td> tag in html in ngFor but is not working

Question

     <tbody>
               <tr *ngFor="let post of postArray; let i=index">
                            <td width="10"> {{ i + 1 }} </td>
               <td width="200"><img src="{{post.data.postImgPath}}" class="img img-fluid"></td>
                 <td width="200"> {{post.data.title}} </td>
                   <td width="300"> {{post.data.excerpt}} </td>
                       <td>{{post.data.category.category}}</td>
                         <td>{{post.data.createdAt}}</td>
                            <td></td>
                        </tr>
          </tbody>

I tried with <td [style.width]="300"> {{post.data.excerpt}}

But is not working either. I tried with:

I tried with <td [style.width.px]="300.px"> {{post.data.excerpt}}

But is not working either.

Can u plaese tell me how to attach width to

Answer 1

Altough I dont understand why you'd want to style the component in the html, heres a way that should work.

<tbody>
   <tr *ngFor="let post of postArray; let i=index">
      <td [style.width]="'10px'"> {{ i + 1 }} </td>
      <td [style.width]="'200px'">
         <img src="{{post.data.postImgPath}}" class="img img-fluid"/>
      </td>
      <td [style.width]="'200px'"> {{post.data.title}} </td>
      <td [style.width]="'300px'"> {{post.data.excerpt}} </td>
      <td>{{post.data.category.category}}</td>
      <td>{{post.data.createdAt}}</td>
      <td></td>
   </tr>
</tbody>

Note that it would be better to style the component over classes and a style file (css).

Answer 2

width will not work with td, try to add with th tag.

for eg.

<table>
 <thead>
    <tr>
      <th [style.width]="'10px'">#</th>
      <th [style.width]="'10px'">Img</th>
    </tr>
  </thead>
<tbody>
   <tr *ngFor="let post of postArray; let i=index">
      <td > {{ i + 1 }} </td>
      <td [style.width]="'200px'">
         <img src="{{post.data.postImgPath}}" class="img img-fluid"/>
      </td>      
   </tr>
</tbody>
<table>