Twitter bootstrap TD没有填充

时间:2014-12-08 12:35:09

标签: css twitter-bootstrap button

对于我的一个项目,我需要制作TD的全宽/高度的一个按钮。我尝试使用-Xpx设置正常的.btn-warning!重要但不起作用。

目前我有这个:

enter image description here

但是想实现这个目标:

enter image description here

我正在使用以下代码:

<tbody>                                                         
<tr>
<td class="td-btn"><a href="#" class="btn-sm btn btn-warning"><span class="glyphicon glyphicon-ok"></span></a></td>
<td><a href="#">Projectnaam</a></td>    
</tr>
</tbody>

有没有人知道如何使这个按钮与TD一起使用/没有间距?

3 个答案:

答案 0 :(得分:0)

我的朋友帮忙了:

<td style="padding: 0px;">
<a href="#" class="btn-sm btn btn-success" style="height: 44px;padding: 12px 10px;">
<span class="glyphicon glyphicon-ok"></span>
</a>
</td>

这几乎是我想要的=)。谢谢大家。

答案 1 :(得分:0)

.table-condensed>thead>tr>th,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>tbody>tr>td,
.table-condensed>tfoot>tr>td {
    padding: 5px;
}

答案 2 :(得分:0)

有两种方法可以使td无填充:

删除table的class属性。

table, tr, td {
  border: 1px solid;
}
<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
<html>
  <div class="container">
    <table>
      <thead>
        <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
      </tbody>
    </table>
  </div>
</html>

或者设计风格

<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
<html>
  <head>
    <style>
      .table > thead > tr > th,
      .table > tbody > tr > th,
      .table > tfoot > tr > th,
      .table > thead > tr > td,
      .table > tbody > tr > td,
      .table > tfoot > tr > td {
      padding: 0px;
    }

    </style>
  </head>
  <div class="container">
    <table class="table">
      <thead>
        <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
      </tbody>
    </table>
  </div>
</html>

相关问题