斑马纹表格内SVG按钮未继承单元格背景色的CSS修复问题

在纯HTML5和CSS环境中，需要为斑马纹表格内的按钮设置样式，要求按钮的背景色与所属单元格的背景色保持一致。原本预期按钮的背景色会从父级<td>继承，但实际并未生效。

当前实现效果如下，可见第2行的按钮应为白色背景，而非灰色：

复现代码 #

<html>
    <head>
        <style type="text/css">
            table {
                width: 50%;
                border-collapse: collapse;
                margin: 3px;
                text-align: center;
            }
            thead {
                color: #fff;
                background-color: #000;
            }
            tbody tr:nth-child(odd) {
                background: #eee;
            }
            tbody tr:nth-child(even) {
                background: #fff;
            }
            button {
                border: none;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <td>id</td>
                    <td>symbol</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>
                        <button>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                            >
                                <path d="M12 3l12 18h-24z" fill="#3c3c3b" />
                            </svg>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>
                        <button>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                            >
                                <path d="M12 21l-12-18h24z" fill="#3c3c3b" />
                            </svg>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

这个问题的核心是background系列CSS属性默认不会自动继承父元素的值，且浏览器会给<button>元素设置默认的灰色背景样式，覆盖了父级的背景显示。

只需要修改button的CSS规则，主动指定继承父元素的背景即可：

button {
    border: none;
    background: inherit; /* 核心属性：继承父元素<td>的背景色 */
    /* 下面是可选优化属性，可按需添加 */
    padding: 0; /* 去掉按钮默认内边距，让SVG图标和单元格对齐更协调 */
    cursor: pointer; /* 鼠标悬浮显示手型，符合按钮交互预期 */
}

修改后奇数行的按钮会自动继承浅灰色背景，偶数行的按钮会自动继承白色背景，完全匹配斑马纹的样式规则。

内容的提问来源于stack exchange，提问作者snim2