编写自定义自举表

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>