在 Firefox 中将 html 表格对齐到中心问题答案

【问题标题】：Aligning a html table to center issue in Firefox在 Firefox 中将 html 表格对齐到中心问题
【发布时间】：2017-05-18 16:55:35
【问题描述】：

我的表结构如下：

<table cellspacing=0 cellpadding=0 cols=17 border=0 id="table" width="1250" >
<colgroup>
    <col width=0>
    <col width=45>
    <col class="coldroup_3">
    <col class="coldroup_3">
    <col class="coldroup_3">
    <col class="coldroup_3">
    <col class="coldroup_3">
    <col class="coldroup_3">
    <col class="coldroup_3">
    <col class="coldroup_3">
    <col class="coldroup_3">
    <col class="coldroup_3">
    <col class="coldroup_3">
    <col class="coldroup_3">
    <col class="coldroup_3">
    <col class="coldroup_3">
    <col class="coldroup_3">
</colgroup>
<tbody>     
    <tr>
            ......
            ......

coldroup_3 类的 css 是

.coldroup_3{
    width: 70px;
}

这里根据某些条件显示和隐藏列，例如，如果我只需要显示五列，那么我将使用 JQuery show() 和 hide() 方法隐藏剩余的列。

问题是，我在这里尝试使用 CSS 在该表上居中

margin: 0 auto;

这里隐藏的列也采用了我使用 CSS 设置的 70px 宽度，因此我显示的列未与中心对齐。

注意：问题仅在 Firefox 中，其余浏览器都可以。

关于如何实现这一点的任何帮助？

【问题讨论】：

标签： css firefox html-table center

【解决方案1】：

在对您的问题进行了一些阅读之后，您可能会做出......

   .colhidden {
       width: 0px;
   }

然后在你使用 .hide() / .show() 的同一个 jQuery 调用中，使用 .removeClass 和 .addClass() 函数来添加/删除类......所以

   $('bla').removeClass('coldroup_3').addClass('colhidden');

http://api.jquery.com/removeClass/

http://api.jquery.com/addClass/

【讨论】：