不会发生对表类的 CSS 更改答案

【问题标题】：CSS Changes to table class do not occour不会发生对表类的 CSS 更改
【发布时间】：2021-07-14 06:39:39
【问题描述】：

我正在尝试定义一个表类并更改它的一些属性，但没有任何反应。我表格中的每个单元格都应该包含一个 50x52 的图像，中间没有间距。但是有间距，每次都需要手动定义图片大小。

我的代码：

table.gameboard
{
  width: 500px;
  height: 520px;
  border: 1px solid #000000; /* Added By Editor */
  border-collapse: collapse; /* Added By Editor */
}
table.gameboard td 
{
  width: 50px;
  height: 52px;
  border-spacing: 0px;
  border-collapse: collapse;
  border: 1px solid #000000; /* Added By Editor */
}

<table class="gameboard">
  <tr>
    <td><img src="blank.bmp"  width=50 height=52  id="puzzle0x0"></td>
    <td><img src="blank.bmp"  width=50 height=52  id="puzzle0x1"></td>
  </tr>
  <tr>
    <td><img src="blank.bmp"  width=50 height=52  id="puzzle19x18"></td>
    <td><img src="blank.bmp"  width=50 height=52  id="puzzle19x19"></td>
  </tr>
</table>

如果我删除宽度和高度的手动定义，图像会变大，尽管游戏板的 td 定义为 50px x 52px。还有，不应该有的地方有空格。

我不确定<style type='text/css'> 是否应该在<head> 或<body> 下定义，我尝试了任一选项，但均无济于事。有什么建议吗？

【问题讨论】：

表格的样式很奇怪。

标签： javascript html css html-table

【解决方案1】：

    <style>
        table.gameboard td 
            {
                width: 50px;
                height: 52px;
                border-spacing: 0px;
                border-collapse: collapse;
            }
         table.gameboard td img
            {
                width: 100%;
                height: 100%;
            }
    </style>

试试这种风格，它会工作的

【讨论】：

'td img' 确实会影响图像大小，但行或列之间的间距仍然存在，就像'td' 什么都不做。

【解决方案2】：

style 和 <link> 总是放在 head 标签中

【讨论】：

【解决方案3】：

显然，需要重置一些 CSS 设置。变化是：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

还有图片：

table.gameboard td img
                            {
                border: 0px;
                            width: 50px;
                            height: 52px;
                border-spacing: 0;
                display: block;
                            }

我很确定并非所有重置都是必需的，但不确定我需要哪一项。

【讨论】：