为什么一个td元素比另一个元素占用更多空间

Question

如果我有这样的表：

<div class="container">

  <table class="table table-bordered">
    <thead>
      <tr>
        <th colspan="2" class="text-center">Test Title</th>
      </tr>
      <tr>
        <th class="text-center">Assignment</th>
        <th class="text-center">Count</th>
      </tr>
    </thead>
    <tbody>
      <tr class="text-center">
        <td>Test Assignment</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>

</div>

包含td的{​​{1}}元素比包含Assignment的{​​{1}}元素宽得多。这看起来很不愉快，因为现在标题似乎偏离中心（即使它居中），b / c td元素占用了太多空间。

我该如何解决？

这是Bootply。

Answer 1

updated bootply  将class="col-md-6"添加到您的<td>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">

  <table class="table table-bordered">
    <thead>
      <tr>
        <th colspan="2" class="text-center">Test Title</th>
      </tr>
      <tr>
        <th class="text-center">Assignment</th>
        <th class="text-center">Count</th>
      </tr>
    </thead>
    <tbody>
      <tr class="text-center">
        <td class="col-md-6 col-xs-6">Test Assignment</td>
        <td class="col-md-6 col-xs-6">1</td>
      </tr>
    </tbody>
  </table>

</div>

Answer 2

你必须定义表的大小

<div class="container" width="196">
<table class="table table-bordered">
<thead>
<tr>
<th colspan="2" class="text-center">Test Title</th>
</tr>
<tr>
<th class="text-center">Assignment</th>
<th class="text-center">Count</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td>Test Assignment</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>