Javascript 如何使用CSS删除表列

我有一个表，我试图使移动友好，所以当屏幕是一个特定的宽度，我删除一个不必要的列。以下是CSS：

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

上面的代码完成了删除带有#urlCell id的单元格的工作，但是剩余的单元格不会填充表格。取而代之的是，它们的宽度保持不变，就好像那里还有另一列一样，缺少单元格的边框也保持不变：

---

您可以对相关的

th

s和

td

s应用相同的类

请参阅下面的代码示例

th，td{
宽度：20%；
边框：1px纯色灰色；
文本对齐：居中；
}
@介质（最大宽度：640像素）
{
.三
{
显示：无；
}
}

一个
两个
三
四
五
1.
2.
3.
4.
5.

向所有要隐藏的单元格添加“无显示”类应该可以工作

<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;
    }
} 

#
名字
姓
用户名
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
拉里
鸟
@推特
@介质（最大宽度：640像素）
{
.urlCell
{
显示：无；
}
} 

---

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

我发现了问题。导致问题的每一行之间都有一个隐藏行。将其与列一起删除可以修复此问题。

您可以为您的表添加代码吗？正如@Okomikeruko所说，如果您否决我以改进答案，请添加足够的代码以创建一条请评论的意见。。。否则，我对此无能为力