Html 将按钮显示在正确的位置

我有7个按钮显示在我的html页面中

这些按钮表示如图所示的天数：

我正在使用一个javascript函数，它只显示特定日期的按钮（在我的例子中：图表上有空值的日期）

但是，当按钮被隐藏时，我会丢失其余按钮的正确位置（我应该有）。。如图所示：

我希望按钮保持在正确的位置。我想要的是这样的东西：

以下是我的Html代码：

   <div id="graph-wrapper" style="height:200px; width:100%; display:inline-block;">   <table class="graph-actions">
        <tr>
          <td id="graph-edit0" class="btn hidden" style="width: 14%">btn 1</td>
          <td id="graph-edit1" class="btn hidden" style="width: 14%">btn 2</td>
          <td id="graph-edit2" class="btn hidden" style="width: 14%">btn 3</td>
          <td id="graph-edit3" class="btn hidden" style="width: 14%">btn 4</td>
          <td id="graph-edit4" class="btn hidden" style="width: 14%">btn 5</td>
          <td id="graph-edit5" class="btn hidden" style="width: 14%">btn 6</td>
          <td id="graph-edit6" class="btn hidden" style="width: 14%">btn 7</td>
        </tr>       </table>  </div>

btn 1
btn 2
btn 3
btn 4
btn 5
btn 6
btn 7

如果CSS中的

.hidden

没有

display:none;

它会将剩余的单元格折叠到可用空间。相反，试着像：

td.hidden{
    display: table-cell; /* reset the .hidden */
    visibility: hidden;  /* use visibility instead*/
}

这里有一个演示：

。隐藏{
显示：无；
}
/*以上是从引导？好吧，我们留着吧*/
/*现在，让我们为TD元素修复它：*/
隐藏的{
显示：表格单元格；
可见性：隐藏；
}

btn 1
btn 2
btn 3
btn 4
btn 5
btn 6
btn 7

更正后，总结如下：

我将我的代码编辑如下：

<div id="graph-wrapper" style="height:200px; width:100%; display:inline-block;">
    <table class="graph-actions" style="width:100%">
        <tr>
            <td id="graph-edit0" class="btn " style="width: 14%;visibility: hidden">btn 1</td>
            <td id="graph-edit1" class="btn " style="width: 14%;visibility: hidden">btn 2</td>
            <td id="graph-edit2" class="btn " style="width: 14%;visibility: hidden">btn 3</td>
            <td id="graph-edit3" class="btn " style="width: 14%;visibility: hidden">btn 4</td>
            <td id="graph-edit4" class="btn " style="width: 14%;visibility: hidden">btn 5</td>
            <td id="graph-edit5" class="btn " style="width: 14%;visibility: hidden">btn 6</td>
            <td id="graph-edit6" class="btn " style="width: 14%;visibility: hidden">btn 7</td>
        </tr>
    </table> </div>

---

谢谢大家：）

而不是使用与CSS

显示相对应的隐藏：无规则，可以使用
可见性：隐藏CSS。
btn 1
不要使用“隐藏”类，尝试在样式中添加
不透明度：0
。请提供一个工作示例，包括CSS。你在使用引导吗？不透明度不是一个很好的解决方案。将保持您的按钮在屏幕上。只是这会让他们变得透明。但他们会在那里。。。。看着你，没错@RokoC.Buljan。。这对我来说不是一个好的解决方案，因为我可以点击不透明度为0的按钮！！谢谢@Roko C.Buljan：你的解决方案对我来说很有效。。我所做的是具有可见性：隐藏所有按钮，之后我使用Jquery编辑给定按钮的css（$（“#图形编辑”+值）。css（“可见性”，“可见”））@taboubim是的，这将与您所拥有的相反，只需使用
可见性
。做得很好。快乐编码
$.each( indexesNullValue(data),function( index, value ){
        $("#graph-edit"+value).css("visibility","visible");
    });