html - CSS 将表重置为默认值

标签 html css css-tables

我正在使用一个预制的购买模板,其中所述模板的作者以这样一种方式将事物连接在一起,有时几乎不可能按照你想要的方式得到一些东西,在这种情况下我有一张 table 试图放入模板的一部分,我不需要或不想按照他们让模板执行的方式设置样式。然而,由于他们是如何做到的,我不能只是去改变 CSS 来做其他事情。我曾尝试将表格归类为其他东西并按照我想要的方式对其进行样式设置,但总有一些东西会被卡在某个地方,而作者的风格仍然存在于表格的一 block 或另一 block 上。因此,我想到了这个想法,为什么不像特定于表的类一样进行重置,我可以首先在元素上调用此类,然后是我希望它在下面设置样式的类,例如:

class="reset_table mynew_style"

所以我试图想出一种方法,但我被卡住了。

.reset_table, 
.reset_table table tr,
.reset_table tr td,
.reset_table table tbody,
.reset_table table thead,
.reset_table table tfoot,
.reset_table table tr th,
.reset_table table tfoot tr tf
{
    margin:0;
    padding:0;
    background:none;
    border:none;
    border-collapse:collapse;
    border-spacing:0;
    background-image:none;
}

现在这似乎几乎完全有效,但仍然存在一些问题。所以我希望这里有人可以帮助我想出一个更好的变体。因此,在尝试将表格重置为正常默认样式的意义上涵盖了所有基础。

最佳答案

这是一个旧线程,但如果这对其他人有帮助:

.clear-user-agent-styles table,
.clear-user-agent-styles thead,
.clear-user-agent-styles tbody,
.clear-user-agent-styles tfoot,
.clear-user-agent-styles tr,
.clear-user-agent-styles th,
.clear-user-agent-styles td {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-collapse: inherit;
    border-spacing: 0;
    border-color: inherit;
    vertical-align: inherit;
    text-align: left;
    font-weight: inherit;
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
}
th, td {
    display: inline;
}

如果它仍然没有覆盖其他开发样式,请确保您在他们的代码之后有此代码,或者通过包含父类或 ID(如果需要)来更具体。尝试避免将 !important 附加到每个属性值的末尾,但这很可能会胜过之前编码的内容。

关于html - CSS 将表重置为默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13076227/

相关文章:

html - 如何同时使用 css-modules 和 bootstrap?

html - 视频元素在 html 中并不完美

html - 你如何斑马条纹 rowspan 表?

javascript - 如何在使用 javascript 生成 pdf 文件时添加图像。添加 imageLoadFromURL 时不会生成 pdf

html - 让两个 div 彼此相邻 float 时遇到一些问题

html - 输入文本 100% 时的边框间距

html - div 的高度不会在 IE7 中自动调整

javascript - 组合 if 语句

javascript - 如何将具有 contenteditable 列的表保存到本地存储中

jquery - 如何在 css 中为页面的全宽和全高设置渐变背景?