Question

我有一张使用 Bootstrap 的表格，其中每个表格单元格的内容都是一个按钮。我希望每个单元格的宽度是按钮的宽度加上边距。我尝试使用<td class="col-md-1">调整大小，但这没有任何区别。

有没有办法用Bootstrap调整宽度？

这是HTML：

   <table class="table table-bordered">
    <tr>
        <td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">1</button></td>
        <td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">2<br>ABC</button></td>
        <td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">3<br>DEF</button></td>
    </tr>
    <tr>
        <td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">4<br>GHI</button></td>
        <td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">5<br>JKL</button></td>
        <td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">6<br>MNO</button></td>
    </tr>
    <tr>
        <td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">7<br>PQRS</button></td>
        <td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">8<br>TUV</button></td>
        <td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">9<br>WXYZ</button></td>
    </tr>
    <tr>
        <td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">&lt;<br></button></td>
        <td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">0<br></button></td>
        <td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">Clr<br></button></td>
    </tr>

由于

Answer 1

您可以像这样向表格添加宽度（假设您将id="phone-table"添加到<table>）：

@media (min-width:767px) {
  #phone-table{
      width:20%;
  }
}
@media (max-width:768px) {
  #phone-table{
      width:40%;
  }
}

我使用了媒体查询，以便表格保持响应能力，并且在任何屏幕上都不会太大或太小。

将Bootstrap中的表格单元格调整为内容

1 个答案:

Bootply Demo