在 Bootstrap 4 中，标题背景颜色不会扩展表格的宽度

Question

我有一个奇怪的格式问题。我有一个使用 Bootstrap 4 的 MVC 应用程序。当我在声明中使用 style="width:xx%" 属性指定表格的宽度时，标题行的背景颜色仅延伸到表格的一部分。如果我不指定宽度，则背景颜色效果很好。我附上了一个片段，它显示了一个使用自动宽度的表格示例，以及一个我将宽度设置为 70% 的表格。

容器是“container-fluid body-content input-group-sm”。 _layout.cshtml 包含以下样式标记，尽管我在此示例中仅引用“table mytable”样式，您将在下面的查看源代码中看到。

body {
  padding-top: 5px;
  margin-left: 10px;
  font-size: 14px;
}

tr {
  line-height: 10px;
  min-height: 10px;
  height: 10px;
  /*padding: 0 !important;*/
}

td {
  padding: 5px;
}

.table th,
.table td {
  padding: 5px 8px;
}

.mytable>tbody>tr>td,
.mytable>tbody>tr>th,
.mytable>tfoot>tr>td,
.mytable>tfoot>tr>th,
.mytable>thead>tr>td,
.mytable>thead>tr>th {
  padding: 4px;
}

.mytable {
  margin-bottom: 2px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  border-color: rgb(204, 204, 204);
  display: inline-block;
  margin-right: 2px;
  width: auto;
  margin-left: 15px;
}

.mytable caption {
  caption-side: top;
  background-color: #f5f5f5;
  color: #333;
  padding: 10px 15px;
  font-size: 16px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-color: rgb( 204, 204, 204);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div style="white-space:nowrap">
  <h4>Test Page</h4>
  <table class="table mytable">
    <caption>My Caption - Table 1</caption>
    <tr>
      <th style="width:30%">Heading 1:</th>
      <td>
        Row 1
      </td>
    </tr>
    <tr>
      <th>Heading 2:</th>
      <td>
        Row 2
      </td>
    </tr>
  </table>
  <br />
  <br />
  <table class="table mytable" style="width:70%">
    <caption>My Caption - Table 2</caption>
    <tr>
      <th style="width:30%">Heading 3:</th>
      <td>
        Row 3
      </td>
    </tr>
    <tr>
      <th>Heading 4:</th>
      <td>
        Row 4
      </td>
    </tr>
  </table>
</div>

我绝对不是样式表方面的专家，所以如果这是一个新手级别的问题，我深表歉意。我已经做了很多谷歌搜索来尝试理解这一点，但结果却是空的。任何关于为什么会发生这种情况的提示，以及如何纠正它的建议将不胜感激。谢谢！

Answer 1

从.mytable 类中删除display: inline-block。

body {
  padding-top: 5px;
  margin-left: 10px;
  font-size: 14px;
}

tr {
  line-height: 10px;
  min-height: 10px;
  height: 10px;
  /*padding: 0 !important;*/
}

td {
  padding: 5px;
}

.table th,
.table td {
  padding: 5px 8px;
}

.mytable>tbody>tr>td,
.mytable>tbody>tr>th,
.mytable>tfoot>tr>td,
.mytable>tfoot>tr>th,
.mytable>thead>tr>td,
.mytable>thead>tr>th {
  padding: 4px;
}

.mytable {
  margin-bottom: 2px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  border-color: rgb(204, 204, 204);
  margin-right: 2px;
  width: auto;
  margin-left: 15px;
}

.mytable caption {
  caption-side: top;
  background-color: #f5f5f5;
  color: #333;
  padding: 10px 15px;
  font-size: 16px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-color: rgb( 204, 204, 204);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div style="white-space:nowrap">
  <h4>Test Page</h4>
  <table class="table mytable">
    <caption>My Caption - Table 1</caption>
    <tr>
      <th style="width:30%">Heading 1:</th>
      <td>
        Row 1
      </td>
    </tr>
    <tr>
      <th>Heading 2:</th>
      <td>
        Row 2
      </td>
    </tr>
  </table>
  <br />
  <br />
  <table class="table mytable" style="width:70%">
    <caption>My Caption - Table 2</caption>
    <tr>
      <th style="width:30%">Heading 3:</th>
      <td>
        Row 3
      </td>
    </tr>
    <tr>
      <th>Heading 4:</th>
      <td>
        Row 4
      </td>
    </tr>
  </table>
</div>