当左对齐使用时，表格来自div

Question

我正在研究一个案例，其中我有一个父表是div的表。该表格有align =“left”，表格立即退出div。

现在我没有对表的控制，我应该在div上操作以使其正常工作

table, th, td {
border: 1px solid black;
}
#container_div{
background-color : red;
padding:10px;
}

<div id = "container_div">
<table align="left">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
</div>

Answer 1

在overflow:hidden;上使用container_div：

＆＃13;

＆＃13;

table, th, td {
    border: 1px solid black;
}

#container_div {
    overflow: hidden; /* add this line */
    background-color: red;
    padding: 10px;
}

＆＃13;

<div id="container_div">
    <table align="left">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
    </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是因为text-align:left设置float:left。试试这个：

#container_div{
    background-color : red;
    padding:10px;
    display: inline-block;
    width: 100%;
}

Answer 3

我不认为像table :: after这样的伪元素会起作用。你能不能像这样在桌子后面设置一个div？

table, th, td {
  border: 1px solid black;
}
#container_div {
  background-color: red;
  padding:10px;
}
.clear { 
  clear: both;
}

<div id="container_div">
<table align="left">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
<div class="clear"> </div>
</div>