Question

我尝试隐藏/显示不同宽度的列，我这样做但是之后我的表宽度有问题！

如果第一个分辨率小于第二个，则表格行未设置为全宽（例如：纵向手机中的加载页面为320×480，然后将手机旋转至横向为480 * 320）但是如果首次加载是在风景中！

这是我的HTML代码：

<div class="row">
  <div class="col-lg-12">
        <div class="box">
            <header>
                <div class="icons"><i class="fa fa-briefcase"></i></div>
                <h5>Project List</h5>
            </header>
            <div id="collapse4" class="body">
                <table id="dataTable" class="table table-bordered table-condensed table-hover table-striped" >
                    <thead>
                    <tr>
                        <th class="hide-col1">ID</th>
                        <th >Name</th>
                        <th >Category</th>
                        <th class="hide-col3">Type</th>
                        <th class="hide-col2">Owner</th>
                        <th class="hide-col3">Pages</th>
                        <th class="hide-col4">Translator</th>
                        <th >Status</th>
                    </tr>
                    </thead>
                    <tbody>
                            <tr>
                                <td class="hide-col1">1</td>
                                <td>sample name</td>
                                <td >English</td>
                                <td class="hide-col3">Normal</td>
                                <td class="hide-col2">Sarah</td>
                                <td class="hide-col3">20</td>
                                <td class="hide-col4">Mehrdad H</td>
                                <td> sample btn </td>
                            </tr>

                    </tbody>                </table>
            </div>
        </div>
    </div>
</div>

和css：

@media  (max-width : 900px){
    .hide-col1{
        display: none;
      }
}
@media  (max-width : 850px){
    .hide-col2{
        display: none;
      }
}
@media  (max-width: 550px){
    .hide-col3{
        display: none ;
      }
}
@media (max-width: 360px){
    .hide-col4{
        display: none;
      }
}

怎么了？

更新：

我也尝试table-layout: fixed和width: 100%;

示例代码：

@media (max-width: 360px){
    .hide-col4{
        display: none;
      }
    #dataTable
    {
        table-layout: fixed;
        width: 100%;
    }
}

当我从class="hide-col*"移除th时，td一切正常！

样本：变化

<th class="hide-col3">

到

<th >

表格行未在引导程序

0 个答案: