当向其添加更多元素时，插入div块中的表水平重叠

我在带有适当样式的代码的div部分中声明的表中添加了带有DRAG和DROP选项的文本。当我调整窗口大小时，表也将重新调整大小，这意味着它可以正常工作。

但是，当表中的元素数量越来越多时，即使只有66.67％的窗口提供给该div元素，它也会在水平方向上扩展。

这是我的代码：

    <div class = "container">
    <div class="row" >

                  <div class="col-md-8" >

                     <h1 >Selected Courses</h1>
              <table width = "100%"  order="5" cellspacing=0 cellpadding=5>

              <tr>
              <td width="100%"  id="red" ondrop="dropIt(this, event)" ondragenter="return false" ondragover="return false">
              <span draggable="true" id="lt1" ondragstart="dragIt(this, event)"><rc>RC</rc></span> 
              </td>
              </tr>

              </table>  

                   </div>


                  <div class="col-md-4" >
                          <h1 >Select Your Courses</h1>

            <table width = "100%" border="5" cellspacing=0 cellpadding=5>
            <tr>

            <td valign="bottom" align="left" id="holder" ondrop="dropIt(this, event)" ondragenter="return false" ondragover="return false">
            <span draggable="true" id="lt" ondragstart="dragIt(this, event)"><cse>CSE114</cse></span>
            <span draggable="true" id="srv" ondragstart="dragIt(this, event)"><ams>AMS151 </ams></span>
            <span draggable="true" id="mf" ondragstart="dragIt(this, event)"><cse class = "tooltip">CSE214<span class = "classic"><sp>An extension of programming </sp>methodology to data storage and manipulation on complex data sets. Topics include: programming and applications of data structures; stacks, queues, lists, binary trees, heaps, priority queues, balanced trees and graphs. Recursive programming is heavily used. Fundamental sorting and searching algorithms are examined along with informal efficiency comparisons.</span></cse></span>
            <span draggable="true" id="ids" ondragstart="dragIt(this, event)"><wrt>WRT101</wrt></span>
            <span draggable="true" id="pc" ondragstart="dragIt(this, event)"><ams>PHY131</ams></span>  
            <span draggable="true" id="ltt" ondragstart="dragIt(this, event)"><ams>PHY133</ams></span>
            <span draggable="true" id="srvv" ondragstart="dragIt(this, event)"><ams>AMS161</ams></span>
            <span draggable="true" id="idss" ondragstart="dragIt(this, event)"><cse>CSE215</cse></span>
            <span draggable="true" id="pcc" ondragstart="dragIt(this, event)"><ams>PHY132</ams></span>  
             <span draggable="true" id="pccc" ondragstart="dragIt(this, event)"><ams>PHY134</ams></span>  
              <span draggable="true" id="ids1" ondragstart="dragIt(this, event)"><wrt>WRT102</wrt></span>

            </td>

            </tr>
            </table>
                      </div>
                  </div>
                   </div>

该元素从右框添加到左框。在这种情况下，当左侧框中的元素数量越来越多时，它还将获得右侧框的位置。

这是用于拖放的代码。

    <script>
            function dragIt(target, e) {
                e.dataTransfer.setData('SpanImg', target.id);
            }
            function dropIt(target, e) {
                var id = e.dataTransfer.getData('SpanImg');
                target.appendChild(document.getElementById(id)); 
                e.preventDefault();
            }
            function trashIt(target, e) {
                var id = e.dataTransfer.getData('SpanImg');
                removeElement(id);
                e.preventDefault();   
            }
            function removeElement(id)  {
                var d_node = document.getElementById(id);
                d_node.parentNode.removeChild(d_node);
            }
            </script>      

CSS代码

    .title {
                            color: rgb(0, 207, 255);
                        }

                        .description { /* description is a class */
                            color: rgb(0, 0, 0);
                            max-width: 705px;  /*color attribute*/ 
                        }

                        .screenshot { /* description is a class */
                            color: red;
                            max-width: 460px;  /*color attribute*/ 
                        }

                        .app {
                            display: -webkit-flex;
                            display: flex;
                        }

                         text {
                                    font-size: 10px;
                                  }
                        /*
                        * {
                           outline: 1px solid red !important;
                        }

                        */
                        * {
                            -webkit-box-sizing: border-box;
                            -moz-box-sizing: border-box;
                            -ms-box-sizing: border-box;
                            box-sizing: border-box;
                        } 

                        table, td
                        {
                            border-color: #e6e6e6;
                            border-style: solid;
                        }

                        cse {
                            font-family: inherit;
                            font-size: 2em;
                            color: white;
                            padding: 3px 3px 3px 3px;
                            margin: 0.37em 0.37em 0.37em 0.37em;
                            font-weight: 500;
                            line-height: 1.5;
                            /*outline: 1px solid DeepSkyBlue;*/
                            background-color: rgba(192,0,0,1);
                            border-radius: 5px;
                        }

                        ams {
                            font-family: inherit;
                            font-size: 2em;
                            color: white;
                            padding: 3px 3px 3px 3px;
                            margin: 0.37em 0.37em 0.37em 0.37em;
                            font-weight: 500;
                            line-height: 1.5;
                            /*outline: 1px solid DeepSkyBlue;*/
                            background-color: rgba(128,100,162,1);
                            border-radius: 5px;
                        }

                        wrt {
                            font-family: inherit;
                            font-size: 2em;
                            color: white;
                            padding: 3px 3px 3px 3px;
                            margin: 0.37em 0.37em 0.37em 0.37em;
                            font-weight: 500;
                            line-height: 1.5;
                            /*outline: 1px solid DeepSkyBlue;*/
                            background-color: rgba(155,187,89,1);
                            border-radius: 5px;
                        }

                        rc {
                            font-family: inherit;
                            font-size: 2em;
                            color: white;
                            padding: 3px 3px 3px 3px;
                            margin: 0.37em 0.37em 0.37em 0.37em;
                            font-weight: 500;
                            line-height: 1.5;
                            /*outline: 1px solid DeepSkyBlue;*/
                            background-color: rgba(79,129,189,1);
                            border-radius: 5px;
                        }

                        sp{
                            font-size: 1.6em;
                        }

                        cse:hover {
                            background-color: rgba(192,0,0,0.4);
                            font-size: 2em;

                        }
                        wrt:hover {
                            background-color: rgba(155,187,89,0.4);
                            font-size: 2em;

                        }
                        ams:hover {
                            background-color: rgba(128,100,162,0.4);
                            font-size: 2em;

                        }
                        rc:hover {
                            background-color: rgba(79,129,189,0.4);
                            font-size: 2em;

                        }
                        .tooltip {

                                    outline: none;
                                    cursor: help; 
                                    text-decoration: none;
                                    position: relative;
                        }
                        .tooltip span {
                                    margin-left: -600em;
                                    position: absolute;
                        }
                        .tooltip:hover span {
                                    border-radius: 10px 10px; 
                                    -moz-border-radius: 10px; 
                                    -webkit-border-radius: 10px; 
                                    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); 
                                    -webkit-box-shadow: 10px 10px rgba(0, 0, 0, 0.1); 
                                    -moz-box-shadow: 10px 10px rgba(0, 0, 0, 0.1);
                                    font-family: Calibri, Tahoma, Geneva, sans-serif;
                                    position: absolute; 
                                    left: 1em; 
                                    top: 3em; 
                                    z-index: 99;
                                    margin-left: -90px; 
                                    width: 300px;
                                    font-size: 0.4em;
                                    color: white;
                                    background-color: DeepSkyBlue;
                        }
                        .tooltip:hover img {
                                    border: 0; margin: -10px 0 0 -55px;
                                    float: left; position: absolute;
                        }
                        .tooltip:hover em {
                                    font-family: Candara, Tahoma, Geneva, sans-serif; 
                                    font-size: 1em; 
                                    font-weight: bold;
                                    display: block; 
                                    padding: 0.2em 0 0.6em 0;
                        }
                        .classic { padding: 0.8em 1em; }
                        .custom { padding: 0.5em 0.8em 0.8em 2em; }

                        .classic {background: #FFFFAA; border: 1px solid #FFAD33; }