将内嵌图像显示为td

时间:2015-11-10 13:20:41

标签: html twitter-bootstrap image html-table

我只是想从表中显示我在td中的内嵌3个图标,我找不到这样做的方法。

我收到了这段代码:

<table id="tableResults" class="col-xs-12 col-lg-12">
      <thead style="border-bottom:1px solid #EEEEEE; line-height: 2em;">
         <tr>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">Name</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadas</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadsa</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadsa</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadsa</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1">ABBVIE</td>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1"></td>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1"></td>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1"></td>
            <td><i class="icon icon-view_list"></i><i class="icon icon-view_list"></i><i class="icon icon-view_list"></i></td>
         </tr>
      </tbody>
</table>

我总是在块中显示结果。我尝试使用img和ul li从td开始使用display:inline,但是没有使用i标签进入td。

有人可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

所以这很好用:

<table id="tableResults" class="col-xs-12 col-lg-12">
      <thead style="border-bottom:1px solid #EEEEEE; line-height: 2em;">
         <tr>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">Name</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadas</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadsa</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadsa</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadsa</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1">ABBVIE</td>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1"></td>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1"></td>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1"></td>
            <td><i class="glyphicon glyphicon glyphicon-asterisk"></i><i class="glyphicon glyphicon glyphicon-th-list"></i><i class="glyphicon glyphicon glyphicon-ok"></i></td>
         </tr>
      </tbody>
</table>

这意味着你的图标样式可能有问题。我尝试将它们与glyphicon上的样式相匹配。

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

我特别关注并查看图标的基类是否显示内嵌块。