The table 250px width

  • Resolved lerocco

    (@lerocco)


    7 years, 5 months ago

    Hello!

    I′m looking for the CSS Code to get the entire table a width of 250px.

    Is it possible? I see only manual for the columns.

    Best regards and many thanks for this nice plugin!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Yes, that possible with some CSS code. For example, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-123 {
  width: 250px;
}

    (and change 123 to the correct table ID).

    Regards,
    Tobias

    Thread Starter lerocco

    (@lerocco)

    Thanks! Nice! It works ??

    Maybe you can say me how can i center the table in a sidebar?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    To center the table, it should be sufficient to extend that code to

    .tablepress-id-123 {
  width: 250px;
  margin: 0 auto 1em;
}

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

    Thread Starter lerocco

    (@lerocco)

    Thanks! Now the table is width: 250px but the culume 2 is no more vertical middle

    I use this CSS:

    .tablepress thead th,
    .tablepress tbody td {
    text-align: center;
    vertical-align: middle;
    }

    Maybe you can check the sidebar on my page https://www.tipi-tipps.com

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    that’s actually caused by your theme loading a CSS file from Bootstrap.

    To vertically center the cells again, change that one line to

    vertical-align: middle !important;

    Regards,
    Tobias

    Thread Starter lerocco

    (@lerocco)

    Best support ever! many thanks!!!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ??

    Best wishes,
    Tobias

    Thread Starter lerocco

    (@lerocco)

    Hi Tobias!

    If i use your code:

    vertical-align: middle !important;

    in the sidebar everything is fine. But in the main table of the page the 4 column isn′t vertical middle…? Why? Maybe you can help me again: Please see my CSS:

    https://tipi-tipps.com/tipico-bonus-code

    .tablepress-id-10 thead th {
	font-family: Open Sans;
	font-size: 14px;
}

.tablepress-id-1 {
	width: 250px;
}

.tablepress thead th,
.tablepress tfoot th {
	background-color: #F5F5F5;
}

.tablepress thead th,
.tablepress tbody td {
	text-align: center;
	vertical-align: middle !important;
}

.tablepress thead .sorting:hover {
	background-color: #0b914a;
	color: #ffffff;
}

span.exklusivbild {
	background-image: url(https://tipi-tipps.com/wp-content/uploads/2017/06/exklusiv.png);
	background-size: contain;
	content: '';
	position: absolute;
	z-index: 2;
	height: 71px;
	width: 13px;
	background-repeat: no-repeat no-repeat;
	margin-top: -5px;
	margin-left: -5px;
}

td.column-1,
td.column-2,
td.column-3,
td.column-4,
td.column-5 {
	border-bottom: 1px solid #C6BCC7;
	vertical-align: middle;
	font-size: 16px;
	background: -moz-linear-gradient(top,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 41%,rgba(0,0,0,.1) 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(31%,rgba(0,0,0,0)),color-stop(41%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,.1)));
	background: -webkit-linear-gradient(top,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 41%,rgba(0,0,0,.34) 100%);
	background: -o-linear-gradient(top,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 41%,rgba(0,0,0,.1) 100%);
	background: -ms-linear-gradient(top,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 41%,rgba(0,0,0,.1) 100%);
	background: linear-gradient(to bottom,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 41%,rgba(0,0,0,.1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#57000000',GradientType=0);
}

td.column-1 {
	text-align: left !important;
}

.column-1 img {
	margin-left: 20px;
}

.column-4 img:hover {
	opacity: .6;
	-webkit-transition: opacity .3s ease-out;
	-moz-transition: opacity .3s ease-out;
	-o-transition: opacity .3s ease-out;
	transition: opacity .3s ease-out;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}

.column-3 div {
	text-shadow: 0 1px 0 rgba(0,0,0,.4);
	box-shadow: 0 3px 5px rgba(0,0,0,.2);
}

/*.button{display:none!important};
.page-id-2818 .button{display:block!important};*/
.button {
	border-radius: 4px !important;
	background-color: #d01635;
	border: none;
	color: #FFFFFF;
	text-align: center;
	font-size: 16px;
	padding: 15px !important;
	width: 200px !important;
	transition: all .5s;
	cursor: pointer;
	margin: 5px;
}

.button span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: .5s;
}

.button span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: .5s;
}

.button:hover span {
	padding-right: 25px;
}

.button:hover span:after {
	opacity: 1;
	right: 0;
}

.button,
.button:hover {
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 2px 6px 0 rgba(0,0,0,0.19) !important;
	border-radius: 4px !important;
	-moz-border-radius: 4px !important;
	-webkit-border-radius: 4px !important;
	border: 1px solid red !important;
	padding: 10px !important;
	background: -webkit-linear-gradient(#d01635,#c92c2a) !important; /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#d01635,#c92c2a) !important; /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#d01635,#c92c2a) !important; /* For Firefox 3.6 to 15 */
	background: linear-gradient(#d01635,#c92c2a) !important;
}

/*.button2{display:none!important};
.page-id-2818 .button2{display:block!important};*/
.button2 {
	border-radius: 4px !important;
	background-color: #d01635;
	border: none;
	color: #FFFFFF;
	text-align: center;
	font-size: 10px;
	padding: 10px !important;
	width: 80px !important;
	transition: all .5s;
	cursor: pointer;
	margin: 5px;
}

.button2 span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: .5s;
}

.button2 span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: .5s;
}

.button2:hover span {
	padding-right: 10px;
}

.button2:hover span:after {
	opacity: 1;
	right: 0;
}

.button2,
.button2:hover {
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 2px 6px 0 rgba(0,0,0,0.19) !important;
	border-radius: 4px !important;
	-moz-border-radius: 4px !important;
	-webkit-border-radius: 4px !important;
	border: 1px solid red !important;
	padding: 10px !important;
	background: -webkit-linear-gradient(#d01635,#c92c2a) !important; /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#d01635,#c92c2a) !important; /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#d01635,#c92c2a) !important; /* For Firefox 3.6 to 15 */
	background: linear-gradient(#d01635,#c92c2a) !important;
}
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    that’s caused by the <div>s in your table having a margin, from your theme. To remove that, please also add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress div {
	margin: 0;
}

    Regards,
    Tobias

    Thread Starter lerocco

    (@lerocco)

    Unbelievable what good work you do!! Many thanks!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    always happy to help! ??

    Best wishes,
    Tobias

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘The table 250px width’ is closed to new replies.