CSS问题表设计

Question

请你帮我修改设计，使数据更清晰，如果你帮助我，我将非常感激，感谢你提前回答

这是我的css文件

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

  }  

这是我的html文件

         <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>

这是结果，不清楚，我不知道如何修复它

当我在 css 中添加table td { word-break: break-all;
}** 结果 结果 2

Answer 1

1.) 每个单元格中都有 colspan="4" 没有任何意义。

2.) tbody 行中的第一个（空）th 元素导致您所写的未对齐。删除它，以便在“id”标题下包含 ID，在“name”标题下包含名称，等等。

3.) 您需要在标题行（末尾）中添加一个额外的第 th 单元格以具有相同的内容其下方行中的单元格数量（包含两个按钮的嵌套表的单元格上方）。

.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>

Answer 2

添加此 css

table td {
    word-break: break-all;
}

并使用此更正后的 html。确保标题列和正文列相等。

<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">email</th>
                    <th class="odd" colspan="4"></th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let el of users | paginate: { itemsPerPage: 2, currentPage: p }">
                    <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>
                        <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>
    </div>
</div>