Html 在表格数据中并排对齐div-CSS

我想在响应表中并排显示div

这是我的HTML：

<div>
   <table>
      <tr>
         <td class="td-prio" style="width: 100px; height: 100px;">
            <div class="panel panel-default" id="E3kRzMgJDPbcBeWwY" style="border-style: solid; cursor: move;">
               <div class="panel-heading">
                  Test1
               </div>
               <div class="panel-body">
                  Test 1 Body
               </div>
            </div>
            <div class="panel panel-default" id="ASDdsgADogiesbfd" style="border-style: solid; cursor: move;">
               <div class="panel-heading">
                  Test2
               </div>
               <div class="panel-body">
                  Test 2 Body
               </div>
            </div>
            <div class="panel panel-default" id="ifsdfuHKJFSas4t" style="border-style: solid; cursor: move;">
               <div class="panel-heading">
                  Test3
               </div>
               <div class="panel-body">
                  Test 3 Body
               </div>
            </div>
         </td>
      </tr>
   </table>
</div>

测试1
测试1主体
测试2
测试2主体
测试3
测试3主体

目前看起来是这样的：

下面是期望的结果：

或者，如果表格宽度较小：

---

任何帮助都将不胜感激。

将此内容写入您的css：

.panel{
    float: left;
}

这是一个例子

---

（请注意，我也需要更改td的宽度

500px

，以便为多个div留出空间。）

如果您希望获得响应效果，则不应将宽度设置为

.td prio

。 此外，您还可以添加

float: left 

去你的房间

以下是JSFIDLE：