css 问题 table 设计

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>

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

当我添加 csstable td { word-break: break-all;
}** 结果 result 2

Answer 1

添加这个css

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

并使用这个更正 html。确保 header 列和 body 列相等。

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

Answer 2

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

2.) tbody 行中的第一个（空）th 元素导致您所写的错位。删除它以在“id”下具有 ID header，在“name”下具有名称 header 等

3.) 您需要在 header 行（最后）中添加一个额外的 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>

css 问题 table 设计

css issue table design

html

css

html-table

angular