html – 表格导致水平滚动条出现在移动设备上

概述我的问题是这段代码： <form method="post" name="myform" class="donate-form"> <table class="donate-table"> <input type="hidden" name="cpp_header_image" value=" 我的问题是这段代码：

<form method="post" name="myform" >                        <table >                            <input type="hIDden" name="cpp_header_image" value="logo.png">                             <input type="hIDden" name="on0" value="Donation Amount">                             <tr>                                <th>                                    <div >                                        <input  name="os0" type="radio" value="5.00" ID="radio">                                         <label  for="" ID="textBlock">.00</label>                                    </div>                                </th>                                <th>                                    <div >                                        <input  name="os0" type="radio" value="25.00" ID="radio">                                         <label  for="" ID="textBlock">.00</label>                                    </div>                                </th>                            </tr>                            <tr>                                <th>                                    <div >                                        <input name="os0" type="radio" value="10.00" ID="radio">                                         <label  for="" ID="textBlock">.00</label>                                    </div>                                </th>                                <th>                                    <div >                                        <input name="os0" type="radio" value="Other" ID="radio">                                         <label  for="other" ID="textBlock">Custom</label>                                    </div>                                </th>                            </tr>                        </table>

这个问题在靠近底部的“捐赠表”中.我有4个单选按钮,5,10,25和其他,我希望这些单选按钮显示为2行2列.在Chrome(全屏)上,一切看起来都很完美,没有水平滚动条,所有单选按钮看起来都不错,但是当我缩小窗口尽可能小或当我使用我的移动设备时,单选按钮被切断,在我的智能手机上水平滚动条出现(我知道问题是因为屏幕尺寸较小但我似乎无法修复它)当我删除3个单选按钮并且只有1时问题就消失了.我怎么能解决这个问题所以我可以显示4个单选按钮而没有出现水平滚动条？我看了,试过overflow-x：hIDden;和一些其他建议的解决方案,但都没有.
任何人都有修复？先感谢您.

如果需要,这是我的CSS代码：

.donations{   margin-top: 15%;   overflow: hIDden;  } .checkBoxgroup {   text-align: center;   display: inline-block;   min-wIDth: 150px;  } .checkBoxgroup label {   display: inline-block;   Font-size: 20px;  }

解决方法 仔细阅读代码评论.希望这会帮助你.

01.替换所有< th>< / th>与< td>< / td>

02. / *使用.donate-table而不是.donations * /

03. / *将min-height属性移动到父类(表示.donate-table类)* /

/* use .donate-table instead of .donations */.donate-table{   margin-top: 15%;   overflow: hIDden;   wIDth:100%;   min-wIDth:160px;   max-wIDth:500px;  }/* move min-height property to parent class (means .donate-table class) */ .checkBoxgroup {   display: inline-block;  } .checkBoxgroup label {   display: inline-block;  }

<form method="post" name="myform" >                        <table >                            <input type="hIDden" name="cpp_header_image" value="logo.png">                             <input type="hIDden" name="on0" value="Donation Amount">                             <tr>                                <td> <!-- Replace all <th></th> with <td></td> -->                                    <div >                                        <input  name="os0" type="radio" value="5.00" ID="radio">                                         <label  for="" ID="textBlock">.00</label>                                    </div>                                </td>                                <td>                                    <div >                                        <input  name="os0" type="radio" value="25.00" ID="radio">                                         <label  for="" ID="textBlock">.00</label>                                    </div>                                </td>                            </tr>                            <tr>                                <td>                                    <div >                                        <input name="os0" type="radio" value="10.00" ID="radio">                                         <label  for="" ID="textBlock">.00</label>                                    </div>                                </td>                                <td>                                    <div >                                        <input name="os0" type="radio" value="Other" ID="radio">                                         <label  for="other" ID="textBlock">Custom</label>                                    </div>                                </td>                            </tr>                        </table>

总结

以上是内存溢出为你收集整理的html – 表格导致水平滚动条出现在移动设备上全部内容，希望文章能够帮你解决html – 表格导致水平滚动条出现在移动设备上所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。