css問題表設計

請你能幫我修復設計以使資料更清晰，如果你能幫助我，我將非常感激，謝謝你提前回答

這是我的 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;
}** 結果 結果 2

uj5u.com熱心網友回復：

1.) colspan="4"在每個 單元格中都沒有任何意義。

2.)行th中的第一個（空）元素tbody會導致您所寫的未對齊。將其擦除以在“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>

uj5u.com熱心網友回復：

添加這個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>

標籤：html css 有角度的 html表

上一篇：如何在Y軸和X軸CSS中調整圖片大小

下一篇：資料中心遠程電源管理單元（智能PDU）的發展闡述