Html table with custom css to only effect one table

Question

I have a project with multiple tables. I am trying to get this example to work with one of the tables without effecting all the other tables in the project. https://codepen.io/anon/pen/bNBLGo

I tried adding a class name to the css. However, it does effect all the tables in the project. Which I don't want, and I only want it to effect the table who I am using the class name.

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;
}

I am referring to the table like

<table class="mytable">

How can i fix this css in that it doesnt effect all the tables in the project, and just the one specifying the css class name?

Thank you

Your example doesn't have the classnames, and only has 1 table. So it's not very helpful. — JakeParis
– JakeParis, Commented Jan 10, 2018 at 15:08
There is only one table in the codepen, can you show an example of the behaviour that you want? — Jesse
– Jesse, Commented Jan 10, 2018 at 15:08

delinear · Accepted Answer · 2018-01-10 15:10:40Z

2

Your code should already mostly do what you want, however note that where you define multiple elements to style, e.g.

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

You have to repeat the use of the .mytable class name, otherwise you start targeting all tbody, tr, td, etc. e.g. the above examples should be namespaced like this:

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

You will have to go through and repeat this everywhere where you have styles you want to apply just to this table split with a comma.

edited Jan 10, 2018 at 15:10

answered Jan 10, 2018 at 15:09

delinear

2,8151 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JakeParis Over a year ago

Beat me to it by like 30 seconds!

Collectives™ on Stack Overflow

Html table with custom css to only effect one table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related