Javascript html、css、隐藏表列的边框但保留内容

Javascript html、css、隐藏表列的边框但保留内容,javascript,html,css,Javascript,Html,Css,我正在尝试制作一个表,它当前看起来像这样: <table> <thead> <th>Worknumber</th> <th>Description</th> <th>Date</th> </thead> <tbody> {{#falseRow}} <tr>

我正在尝试制作一个表,它当前看起来像这样:

<table>
    <thead>
        <th>Worknumber</th>
        <th>Description</th>
        <th>Date</th>
    </thead>
    <tbody> 
        {{#falseRow}}
        <tr> 
            <td>{{this.workNumber}}</td>
            <td>{{this.shortNote}}</td>
            <td>{{this.timeStamp}}</td>
            <td>
                <div class="makeItDone">
                    <form action="/list/{{this.id}}" method="get"> 
                        <button type="submit" class="material-icons">done</button> 
                    </form>
                </div> 
            </td>
            <td>
                <div class="upDateRecord">
                    <form action="/edit/{{this.id}}" method="get">
                        <button type="submit" class="material-icons">view_list</button> 
                    </form>
                </div>
            </td>
        </tr>
        {{/falseRow}} 
    </tbody> 
</table>

我想隐藏按钮所在的块,但我找不到解决方案。 我的html代码如下所示:

<table>
    <thead>
        <th>Worknumber</th>
        <th>Description</th>
        <th>Date</th>
    </thead>
    <tbody> 
        {{#falseRow}}
        <tr> 
            <td>{{this.workNumber}}</td>
            <td>{{this.shortNote}}</td>
            <td>{{this.timeStamp}}</td>
            <td>
                <div class="makeItDone">
                    <form action="/list/{{this.id}}" method="get"> 
                        <button type="submit" class="material-icons">done</button> 
                    </form>
                </div> 
            </td>
            <td>
                <div class="upDateRecord">
                    <form action="/edit/{{this.id}}" method="get">
                        <button type="submit" class="material-icons">view_list</button> 
                    </form>
                </div>
            </td>
        </tr>
        {{/falseRow}} 
    </tbody> 
</table>

我确实在按钮的td处尝试了{display:none;},但它忽略了整个块。我只是想知道是否有任何方法可以使这个块的边框和背景以某种方式不可见,但保持按钮在当前的形式和位置。也许这个设计是错误的,这不是将按钮与行对齐的方式,我不确定:(

设置td上的单元格颜色以及边框,并添加一个类来删除它

th,
运输署{
边框:1px纯黑;
背景色:红色;
宽度:100px;
}
运输署{
背景颜色:绿色;
}
td.clean{
边界:0;
背景色:透明;
}
div{
背景颜色:黄色;
}

1.
2.
3.
1.
2.
3.
4.
5.

您是否尝试过
背景:透明
?请插入一个代码以打开.jsfiddle?您已经为
TR
设置了背景色,并且不能用透明的
TD
背景覆盖它。您说过要隐藏块,听起来像是单元格,但只想删除背景和边框?应用t他给td元素上色,而不是给行上色。所以添加一个规则来删除单元格的边框和背景色。@克里斯蒂安请不要建议使用外部站点来共享代码。所以应该使用一个非常易于使用的内部代码段。谢谢你的回答,我刚才实际上在研究css,并且我从一些网站复制了这个表是的,但你给了我一个很好的例子,帮助我更好地理解这张桌子,谢谢!