Html 边界折叠不再起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18092285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:55:12  来源:igfitidea点击:

Border-collapse not working again

htmlcsshtml-tableborder

提问by Mhoram

Sorry, I know that similar questions have been asked before, but none of the suggestions in them worked in my case. I have a table (for tabular data, not for layout), and I want no borders to be visible in the table header. As far as I know, the way to do it is to specify border-collaps: collapse;in the CSS. However, borders were still visible after this in my case. I searched this site, tried the various solutions that have been suggested here-- border-spacing-0px, display-none--but nothing worked. The borders are still there. The code in my CSS now looks like this:

抱歉,我知道之前有人问过类似的问题,但其中的任何建议都不适用于我的情况。我有一个表格(用于表格数据,而不是用于布局),并且我希望表格标题中没有边框可见。据我所知,这样做的方法是border-collaps: collapse;在 CSS 中指定。但是,在我的情况下,此后边界仍然可见。我搜索了这个网站,尝试了这里建议的各种解决方案--border-spacing-0px, display-none但没有任何效果。边界仍然存在。我的 CSS 中的代码现在看起来像这样:

.tableStyle2 {
    border-spacing: 0px;
}

.tableStyle2 th {
    background-color: #1B7AE0;
    border-color: #1B7AE0;
    border-spacing: 0px;
}

.tableStyle2 tr {
    display: none;
}

and the corresponding HTML code is as follows:

对应的HTML代码如下:

<table class = "tableStyle2" width = "100%">
<tr>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
</tr>
</table>

(The rest of the table has not yet been written.) Any idea what is causing this, and how is it possible to hide the borders between cells in the table header?

(表格的其余部分尚未写入。)知道是什么导致了这种情况,以及如何隐藏表格标题中单元格之间的边界?

回答by Scott Pelak

Each of the <td>s determines (and is responsible for) its own border.

每个<td>s 确定(并负责)自己的边界。

.tableStyle2 {
    border-spacing: 0px;
    border-collapse:collapse;  /* <--- add this so all the internal <td>s share adjacent borders  */
    border:1px solid black;  /* <--- so the outside of the <th> don't get missed  */
}

.tableStyle2 th {
    background-color: #1B7AE0;
    border-color: #1B7AE0;
    border-spacing: 0px;  /* <---- won't really need this if you have border-collapse = collapse */
    border-style:none;   /* <--- add this for no borders in the <th>s  */
}

.tableStyle2 tr {
   /* display: none; <--- you want to show the table  */
}