Html 为列sm调整引导表大小/重新组织

我在引导和表格方面是新手，我有一个表格，我一直用它作为图表的图例：

<div class="col-md-4 col-sm-12" id="chart1" style="display:none; border: 1px solid lightgray; padding-top:2%">
    <h3 style="text-align:center"><b>MY CHART</b></h3>
    <div id="chart" style="width:100%; min-height:500px"></div>
    <div id="myLegend" style="width:70%; height:40px;  margin: 0 auto;" class="row">
       <table style="font-size:18px; color:#545454">
          <tbody>
              <tr>
                 <td>
                    <div style="border:1px solid #ccc; padding: 1px">
                         <div style="width:4px; height:0; border: 5px solid rgb(145,207,80); overflow: hidden"></div>
                    </div>
                 </td>
                 <td>First Val</td>
                 <td>
                    <div style="border:1px solid #ccc; padding: 1px">
                         <div style="width:4px; height:0; border: 5px solid rgb(112,171,70); overflow: hidden"></div>
                    </div>
                </td>
                <td>Second Val</td>
                <td>
                    <div style="border:1px solid #ccc; padding: 1px">
                       <div style="width:4px; height:0; border: 5px solid rgb(255,191,0); overflow: hidden"></div>
                    </div>
                </td>
                <td>Third Val</td>
                <td>
                    <div style="border:1px solid #ccc; padding: 1px">
                         <div style="width:4px; height:0; border: 5px solid rgb(255,0,0); overflow: hidden"></div>
                    </div>
                </td>
                <td>Forth Val</td>
             </tr>
        </tbody>
      </table>
  </div>
</div>

我的图表
第一节
第二节
第三节
福斯瓦尔

在更大的屏幕上，图例看起来不错，但当屏幕更小但仍大于列sm时，表会以id

chart1

的形式出现在div之外，我需要它以某种方式调整大小/重新组织成两行以适应div。我尝试使用

表响应

，但它添加了一个水平滚动，这并不好。

---

当屏幕大小发生变化时，是否有方法使表格内容适合？

您可以参考这些有关网格系统的知识

引导网格系统有四个类：
xs（适用于屏幕宽度小于768px的手机）
sm（用于平板电脑-屏幕宽度等于或大于768px）
md（适用于小型笔记本电脑-屏幕宽度等于或大于992px）
lg（适用于笔记本电脑和台式电脑-屏幕宽度等于或大于1200px）

如果需要自定义，可以覆盖默认css文件bootstrap.min.css中的X百分比

@媒体（最小宽度：992px）.col-md-4{
宽度：X%；}

---

您可以参考这些关于网格系统的知识

引导网格系统有四个类：
xs（适用于屏幕宽度小于768px的手机）
sm（用于平板电脑-屏幕宽度等于或大于768px）
md（适用于小型笔记本电脑-屏幕宽度等于或大于992px）
lg（适用于笔记本电脑和台式电脑-屏幕宽度等于或大于1200px）

如果需要自定义，可以覆盖默认css文件bootstrap.min.css中的X百分比

@媒体（最小宽度：992px）.col-md-4{
宽度：X%；}

我在这里为你建造了它：

您似乎缺少的是table类：

<table class="table"></table>

我还将您使用myLegend div的row类移到了文档的顶部，因为下面似乎不需要它

编辑：

我构建了我认为您正在尝试的另一种可能更好的方式，我将这样做：

我在这里为您构建了它：

您似乎缺少的是table类：

<table class="table"></table>

我还将您使用myLegend div的row类移到了文档的顶部，因为下面似乎不需要它

编辑：

---

我构建了我认为您正在尝试的另一种可能更好的方式，我将这样做：

您使用的是bootstrap 3还是4？@Prajwal bootstrap 4为什么要使用table。您可以使用div实现它。谢谢你是用bootstrap 3还是4？@Prajwal bootstrap 4为什么要用table呢。您可以使用div实现它。谢谢