編寫自定義自舉表

Question

我已經在那裏我需要寫一個自舉表所示圖片中要求：

我寫了一個代碼like this.
HTML：

<table class="table table-bordered text-center table-responsive"> 
    <thead> 
     <th class="text-center" width="30%">Modules</th> 
     <th class="text-center" width="70%">Previlages</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Hello</td> 
      <td><input type="checkbox" class="form-control"></td> 
     </tr> 
    </tbody> 
</table> 

但這不符合要求。我如何創建如圖所示的自定義表格？

Answer 1

檢查了這一點

<table class="table table-bordered text-center table-responsive"> 
    <thead> 
    <tr> 
     <th class="text-center">Modules</th> 
     <th class="text-center" colspan="4">Previleges</th> 
    </tr> 
    <tr> 
     <th></th> 
     <th>Add</th> 
     <th>Edit</th> 
     <th>Delete</th> 
     <th>View</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>User</td> 
    <td><input type="checkbox" class="form-control"></td> 
    <td><input type="checkbox" class="form-control"></td> 
    <td><input type="checkbox" class="form-control"></td> 
    <td><input type="checkbox" class="form-control"></td> 
    </tr> 
    <tr> 
     <td>Question</td> 
     <td><input type="checkbox" class="form-control"></td> 
     <td><input type="checkbox" class="form-control"></td> 
     <td><input type="checkbox" class="form-control"></td> 
     <td><input type="checkbox" class="form-control"></td> 
    </tr> 

    </tbody> 
</table> 

Answer 2

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<table class="table table-bordered text-center table-responsive"> 
 
    <thead> 
 
     <th class="text-center" width="30%">Modules</th> 
 
     <th colspan="4" class="text-center" width="70%">Previlages</th> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td></td> 
 
      <td>Edit</td> 
 
      <td>Delete</td> 
 
      <td>Update</td> 
 
      <td>New</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Hello</td> 
 
      <td><input type="checkbox" class="form-control"></td> 
 
      <td><input type="checkbox" class="form-control"></td> 
 
      <td><input type="checkbox" class="form-control"></td> 
 
      <td><input type="checkbox" class="form-control"></td> 
 
     </tr> 
 
     <tr> 
 
      <td>Hello</td> 
 
      <td><input type="checkbox" class="form-control"></td> 
 
      <td><input type="checkbox" class="form-control"></td> 
 
      <td><input type="checkbox" class="form-control"></td> 
 
      <td><input type="checkbox" class="form-control"></td> 
 
     </tr> 
 
     <tr> 
 
      <td>Hello</td> 
 
      <td><input type="checkbox" class="form-control"></td> 
 
      <td><input type="checkbox" class="form-control"></td> 
 
      <td><input type="checkbox" class="form-control"></td> 
 
      <td><input type="checkbox" class="form-control"></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

喜歡這個應該是

Answer 3

試試這個。

<table class="table table-bordered text-center table-responsive"> 
    <thead> 
     <th class="text-center">Modules</th> 
     <th class="text-center" colspan="4">Previlages</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td></td> 
      <td>Add</td> 
      <td>Edit</td> 
      <td>Delete</td> 
      <td>XYZ</td> 
     </tr> 
     <tr> 
      <td>Hello</td> 
      <td> 
       <input type="checkbox" class="form-control"> 
      </td> 
      <td> 
       <input type="checkbox" class="form-control"> 
      </td> 
      <td> 
       <input type="checkbox" class="form-control"> 
      </td> 
      <td> 
       <input type="checkbox" class="form-control"> 
      </td> 
     </tr> 
    </tbody> 
</table> 

- 編輯 - JSFiddle

Answer 4

試試這個..

HTML

<table class="table table-bordered text-center table-responsive"> 
    <thead> 
     <th class="text-center" width="30%">Modules</th> 
     <th colspan="4" class="text-center" width="70%">Previlages</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td></td> 
      <td>Add</td> 
      <td>Edit</td> 
      <td>Delete</td> 
      <td>View</td> 
     </tr> 
     <tr> 
      <td>User</td> 
      <td><input type="checkbox" class="form-control"></td> 
      <td><input type="checkbox" class="form-control"></td> 
      <td><input type="checkbox" class="form-control"></td> 
      <td><input type="checkbox" class="form-control"></td> 
     </tr> 
    </tbody> 
</table>