Question

我有一个包含多个表的项目。我试图让这个例子与其中一个表一起工作而不影响项目中的所有其他表。 https://codepen.io/anon/pen/bNBLGo

我尝试在css中添加一个类名。但是，它确实会影响项目中的所有表。我不想要的，我只想让它影响我使用类名的表。

CSS

.mytable {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 2px solid black;
}

.mytable thead, tbody, tr, td, th { display: block; }

.mytable tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}

.mytable thead th {
height: 30px;
line-height: 30px;
/*text-align: left;*/
}

.mytable tbody {
height: 100px;
overflow-y: auto;
}

.mytable thead {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: calc(100% - 17px);
}

.mytable tbody { border-top: 2px solid black; }

.mytable tbody td, thead th {
width: 19.2%;
float: left;
border-right: 1px solid black;
}

.mytable tbody td:last-child, thead th:last-child {
border-right: none;
}

我指的是像

这样的表格

<table class="mytable">

我如何解决这个问题，因为它不影响项目中的所有表，只是指定css类名的那个？

谢谢

Answer 1

您的代码应该已经基本上按照您的意愿执行，但请注意，在您定义多个要设置样式的元素时，例如

.mytable thead, tbody, tr, td, th { display: block; }
.mytable tbody td, thead th {

您必须重复使用.mytable类名，否则您开始定位所有tbody，tr，td等。上面的例子应该是这样命名的：

.mytable thead, .mytable tbody, .mytable tr, .mytable td, .mytable th { display: block; }
.mytable tbody td, .mytable thead th {

你必须在任何地方重复这一点，你想要将这些样式应用到这个用逗号分割的表格。

带有自定义css的Html表只能生成一个表

1 个答案: