Bootstrap 中 td 无文本遇到的问题 

 1 <table class="table basicinfo-table table-bordered table-hover">
 2            <thead>
 3            <tr>
 4              <th colspan="4">基本信息 basic information</th>
 5            </tr>
 6            </thead>
 7             <tbody>
 8             <tr>
 9               <th>姓名：</th>
10               <td></td>
11               <th>性别：</th>
12               <td></td>
13             </tr>
14 
15             <tr>
16               <th colspan="1">身份证号：</th>
17               <td colspan="3"></td>
18             </tr>
19             </tbody>
20           </table>

效果：

可见，没有预想的把一行四等分；

 

如何解决？

 <table class="table basicinfo-table table-bordered table-hover">
           <thead>
           <tr>
             <th colspan="4">基本信息 basic information</th>
           </tr>
           </thead>
            <tbody>
            <tr>
              <th class="col-xs-3">姓名：</th> class="col-xs-3"
              <td class="col-xs-3"></td>
              <th class="col-xs-3">性别：</th>
              <td class="col-xs-3"></td>
            </tr>

            <tr>
              <th colspan="1">身份证号：</th>
              <td colspan="3"></td>
            </tr>
            </tbody>
          </table>

在最多的单元格的tr中，给每个单元格用col切分;

效果：

 

posted on 2018-01-02 23:06  huozaimengli  阅读(201)  评论(0)    收藏  举报

导航