Search code examples
htmlcssangularhtml-table

css issue table design

please can you help me to fix the design to make data more clear ,i will be very grateful if you help me ,thanks for your answer in advance

this is my css file

  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;

  }

this is my html file

         <div class="col-md-12">
           <div class="table-wrap">
             <table class="table table-striped" >
               <thead>
                 <tr>
                   <th class="odd" colspan="4">id</th>
                   <th class="odd" colspan="4">name</th>

                   <th *ngIf="isAdmin()" class="odd" colspan="4"> password</th>
                   <th class="odd" colspan="4">role</th>
                   <th class="odd" colspan="4"class="corner wideRow">email</th>

                 </tr>
               </thead>
               <tbody>

                 <tr *ngFor="let el of users | paginate: { itemsPerPage: 2, currentPage: p }">


                 <th class="odd" colspan="4"  ></th>
                 <td class="odd" colspan="4" >{{el.id}} </td>
                             <td class="odd" colspan="4" >{{el.username}}</td>

                             <td *ngIf="isAdmin()" class="odd" colspan="4">{{el.password}}</td>
                 <td class="odd" colspan="4" >{{el.role}}</td>
                             <td class="odd" colspan="4" >{{el.email}}</td>



                           <td  class="odd" colspan="4"> 
                 <tr>
                   <a *ngIf="isAdmin()"
                   class="btn btn-danger" (click) = "deleteUser(el.id)" >Delete</a>

                   <a *ngIf="isAdmin()" class="btn btn-success" data-original-title="Edit">Edit</a> 

                                </tr>       
 </td>
                          
                           
                         </tbody>
                       </table>
             </div>
             </div>

       </div>
       <pagination-controls (pageChange)="p = $event"></pagination-controls>

this the result ,it's not clear and i didn't khnow how to fixed it this is the result

when i add in csstable td { word-break: break-all;
}** the result result 2

Solution

  • 1.) Having colspan="4" in each cell does not make any sense.

    2.) The first (empty) th element in the tbody rows causes the misaligning you wrote about. Erase that to have IDs under the "id" header, names under the "name" header etc.

    3.) You need an additional th cell in the header row (at the end) to have the same amount of cells as in the rows below it (above the cells with the nested tables which contain the two buttons).

    .table-striped {
  width: 100%;
  border-collapse: collapse;
}

table td {
  border: 1px solid #ddd;
  word-break: break-all;
}
    <table class="table table-striped">
  <thead>
    <tr>
      <th class="odd">id</th>
      <th class="odd">name</th>
      <th *ngIf="isAdmin()" class="odd"> password</th>
      <th class="odd">role</th>
      <th class="odd">email</th>
      <th class="odd"></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let el of users | paginate: { itemsPerPage: 2, currentPage: p }">
      <td class="odd">{{el.id}} </td>
      <td class="odd">{{el.username}}</td>
      <td *ngIf="isAdmin()" class="odd">{{el.password}}</td>
      <td class="odd">{{el.role}}</td>
      <td class="odd">{{el.email}}</td>
      <td>
        <table>
          <tr>
            <td>
              <a *ngIf="isAdmin()" class="btn btn-danger" (click)="deleteUser(el.id)">Delete</a>
            </td>
            <td>
              <a *ngIf="isAdmin()" class="btn btn-success" data-original-title="Edit">Edit</a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>