Bootstrap 中 td宽度问题 

 1 <table class="table basicinfo-table table-bordered table-hover">
 2            <thead>
 3            <tr>
 4              <th colspan=""></th>
 5            </tr>
 6            </thead>
 7             <tbody>
 8             <tr>
 9               <td></td>
10               <td></td>
11               <td></td>
12               <td></td>
13             </tr>
14             <tr>
15               <td></td>
16               <td></td>
17             </tr>
18             </tbody>
19           </table>

此时设置td:width : 25%  效果如下

说明设置宽度无效；

 

修改后HTML代码：

<table class="table basicinfo-table table-bordered table-hover">
           <thead>
           <tr>
             <th colspan="4"></th>
           </tr>
           </thead>
            <tbody>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="2"></td>
              <td colspan="2"></td>
            </tr>
            </tbody>
          </table>

达到预想的效果。但是宽度设置依然无效，无法设置宽度，通过colspan解决；

参照的应该是td最多的那个tr;

 

验证：参照的是td最多的那个tr

HTML代码：

<table class="table basicinfo-table table-bordered table-hover">
           <thead>
           <tr>
             <th colspan="4"></th>
           </tr>
           </thead>
            <tbody>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="2"></td>
              <td colspan="2"></td>
            </tr>
            </tbody>
          </table>

效果如下：

 

posted on 2018-01-02 22:21  huozaimengli  阅读(1094)  评论(0)    收藏  举报

导航