Question

我有一张桌子，我试图使移动设备友好，所以当屏幕是一定宽度时，我删除了一个不必要的列。这是CSS的原因：

@media (max-width: 640px) 
{
    .urlCell
    {
        display: none;
    }
}

上面的代码完成了使用#urlCell id删除单元格的工作，但其余的单元格不会填充表格。相反，它们的宽度仍然保持在那里还有另一列，并且还有缺失单元格的边框：

Answer 1

您可以将相同的类应用于相关的th和td。

请参阅下面的代码示例

th, td {
  width: 20%;
  border: 1px solid gray;
  text-align: center;
}

@media (max-width: 640px) 
{
    .three
    {
        display: none;
    }
}

<table>
  <tr>
    <th class="one">One</th>
    <th class="two">Two</th>
    <th class="three">Three</th>
    <th class="four">Four</th>
    <th class="five">Five</th>
  </tr>
  <tr>
    <td class="one">1</td>
    <td class="two">2</td>
    <td class="three">3</td>
    <td class="four">4</td>
    <td class="five">5</td>
  </tr>
</table>

Answer 2

向要隐藏的所有单元格添加display none类应该有效。

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th class="urlCell">Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td class="urlCell">Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td class="urlCell">Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td class="urlCell">the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>


@media (max-width: 640px) 
{
    .urlCell
    {
        display: none;
    }
}

https://jsfiddle.net/ccnxa7b6/

Answer 3

表的设计并不意味着隐藏指定的列。我的建议是使用flex，一种用于解决我们所有问题的css技术，真的：D

Answer 4

我发现了问题。导致问题的每一行之间都有一个隐藏的行。删除它与列固定它。

如何使用CSS删除表列

4 个答案: