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

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%;
  }
}

我使用媒体查询是为了让表格保持响应性，并且在任何屏幕上都不会太大或太小。

Bootply Demo