如何将布局容器向左移动

Question

在下面的代码中，我试图以水平对齐方式显示图例的内容。问题是，包含图例的布局水平对齐“我喜欢它”，但它扩展超出了屏幕边框，我不想传说 容器是这样的。我希望包含图例的布局容器向左移动或移位。请告诉我该怎么做。

请告诉我如何实现第一点和第二点。

代码：

<div class="box1" *ngIf="showAreasOfCoverageWithRespectToIntersectedEnvelope==true || showAreasOfCoverage==true">
                        <table>
                            <tr>
                                <td><div id="legend_0_10"></div></td>
                                <td style="text-align: left; vertical-align: middle;">0_10 m</td>

                                <td><div id="legend_10_20"></div></td>
                                <td style="text-align: left; vertical-align: middle;">10_20 m</td>

                                <td><div id="legend_20_30"></div></td>
                                <td style="text-align: left; vertical-align: middle;">20_30 m</td>

                                <td><div id="legend_30_40"></div></td>
                                <td style="text-align: left; vertical-align: middle;">30_40 m</td>

                                <td><div id="legend_40_50"></div></td>
                                <td style="text-align: left; vertical-align: middle;">40_50 m</td>
                            </tr>
                            <tr>
                                <td><div id="legend_50_60"></div></td>
                                <td style="text-align: left; vertical-align: middle;">50_60 m</td>

                                <td><div id="legend_60_70"></div></td>
                                <td style="text-align: left; vertical-align: middle;">60_70 m</td>
                            
                            
                                <td><div id="legend_70_80"></div></td>
                                <td style="text-align: left; vertical-align: middle;">70_80 m</td>
                            
                            
                                <td><div id="legend_80_90"></div></td>
                                <td style="text-align: left; vertical-align: middle;">80_90 m</td>
                            
                            
                                <td><div id="legend_90"></div></td>
                                <td>90 m</td>
                            </tr>
                        </table>
                    </div>

css：

#legend_0_10{
  background-color:#ffffff;
  height:20px;
  width: 30px;
}
#legend_10_20{
  background-color:#ffe2e2;
  height:20px;
  width: 30px;
}
#legend_20_30{
  background-color:#ffc6c6;
  height:20px;
  width: 30px;
}
#legend_30_40{
  background-color:#ffaaaa;
  height:20px;
  width: 30px;
}
#legend_40_50{
  background-color:#ff8d8d;
  height:20px;
  width: 30px;
}
#legend_50_60{
  background-color:#ff7171;
  height:20px;
  width: 30px;
}
#legend_60_70{
  background-color:#ff5555;
  height:20px;
  width: 30px;
}
#legend_70_80{
  background-color:#ff3838;
  height:20px;
  width: 30px;
}
#legend_80_90{
  background-color:#ff1c1c;
  height:20px;
  width: 30px;
}
#legend_90{
  background-color:#ff0000;
  height:20px;
  width: 30px;
}
.flex-container {
  display: flex;
  justify-content: center;
  height: 100px;
  width:100px;
  align-content: center;
  align-items: stretch;
}


.flex-container > div {
  background-color: #a00f0f;
  width: 30px;
  margin: 10px;
  text-align: center;
  line-height: 55px;
  font-size: 10px;
}
.box1 {
  background-color: #aaff00;
  width: 498px;
  float: left;
}
            

屏幕截图

Answer 1

尝试在单元格或单元格元素内部使用没有静态宽度的流体结构，使用表格宽度：100%；