Width not working

Hello!

I have two tables for different views, one for desktop and one for mobile.

I am using them as follow in my wp-editor:
[table id=6 /][table id=7 /]

Now the strange thing is, a soon as I start to use custom CSS code for “table-7” it will not go to its full width, see: https://imgur.com/a/PloJb

Here is a test table: https://prime-ratgeber.de/tablepress-test/
When you resize your browser window you will see the effect.

Here is my custom CSS code:

.tablepress-id-7 {
	display: none;
}

@media (max-width: 971px) {

	.tablepress-id-7 {
		display: unset;
	}

}

@media (max-width: 971px) {

	.tablepress-id-6 {
		display: none;
	}

}

.tablepress-id-7 .row-1 .column-1 {
	background-color: #79bb01;
	text-align: center;
	font-weight: bold;
	color: #fff;
}

.tablepress-id-7 .row-1 .column-1,
.tablepress-id-7 .row-2 .column-1,
.tablepress-id-7 .row-3 .column-1,
.tablepress-id-7 .row-4 .column-1,
.tablepress-id-7 .row-5 .column-1,
.tablepress-id-7 .row-6 .column-1 {
	border-left: 1px solid #79bb01;
	border-right: 1px solid #79bb01;
}

.tablepress-id-7 .row-6 .column-1 {
	border-bottom: 1px solid #79bb01;
}

I already tried the following both version, but unfortunately it does not work.

.tablepress-id-7 {
	width: auto;
}

.tablepress-id-7 {
	width: auto !important;
}

Any idea how to solve my problem?

• This topic was modified 8 years, 2 months ago by BeamX1.