Html 需要帮助使Easy Table（Wordpress插件）响应吗

我已经使用Wordpress插件“easy table”制作了一个菜单，现在我想让它响应。我有东西左右浮动，在移动设备上观看时，它看起来扭曲得很厉害。我想请你帮我确定一下这个位置

以下是一些相关的HTML：

<div class="leftFloat">
<div id="menuHeader">
<h2>Appetizers</h2>
</div>
[tbl width="400" colwidth="50|50" colalign="left|right"]
Onion Rings-4.95
Fries-3.99
Nachos Supreme (small)-8.95
Nachos Supreme (large)-10.95
[/tbl]


<div id="menuHeader">
<h2>Fresh Salads</h2>
</div>
[tbl width="400" colwidth="100|50|50" colalign="left|right|right"]
-Small-Large
Garden Salad-4.95-5.99
Chef | Caesar| Greek-5.95-6.95
Add chicken for--2.00
[/tbl]
</div>

<div class="rightFloat">
<div id="menuHeader">
<h2>From the Grill</h2>
</div>
[tbl width="400" colwidth="100|50" colalign="left|right"]
Donair Burger-4.95
Hamburger-3.25
Cheeseburger-3.95
Big "J" Burger-5.95
Double Burger-5.95
Club Sandwich & Fries-6.95
BLT Sandwich & Fries-5.95
Lasagna & Garlic Bread-7.25
Chicken or Beef StirFry-8.95
Lebanese Shistawook-7.95
[/tbl]
</div>

<div class="clear"></div>

试试这个CSS：

.easy-table {
    width: 400px;
}

@media (max-width: 767px) {
    .leftFloat, .rightFloat {
        float : none;
    }

    .easy-table {
        width: 100%;
    }
}

---

并从表中删除内联样式（将

[tbl width=“400”colwidth=“50”colalign=“left | right”]

更改为

[tbl colwidth=“50”colalign=“left | right”]

。

如果需要响应性设计，请在项目中使用响应性网格系统。你是怎么做的

• 他们是我的最爱或有更多

简单响应设计：[引导]

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-4"> ... </div> 
        <div class="col-lg-6 col-md-8"> ... </div>
        <!-- col-lg-6 = on large screen   -> 6/12 (50%)  "big computer" -->
        <!-- col-md-6 = on medium screen  -> 6/12 (50%)  "normal computer" -->
        <!-- col-sm-6 = on small screen   -> 6/12 (50%)  "tablet" -->
        <!-- col-xs-6 = on x-small screen -> 6/12 (50%)  "mobile" -->
        <!-- these are all standard screen pixel -->
    </div>
</div>

...  
... 

有关更多示例：

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-4"> ... </div> 
        <div class="col-lg-6 col-md-8"> ... </div>
        <!-- col-lg-6 = on large screen   -> 6/12 (50%)  "big computer" -->
        <!-- col-md-6 = on medium screen  -> 6/12 (50%)  "normal computer" -->
        <!-- col-sm-6 = on small screen   -> 6/12 (50%)  "tablet" -->
        <!-- col-xs-6 = on x-small screen -> 6/12 (50%)  "mobile" -->
        <!-- these are all standard screen pixel -->
    </div>
</div>