Здравствуйте, как центрировать table при клике, таблица раскрывающиеся?

Question

[Улан Мурзалиев]

у меня div и в нем прайс лист , сделал раскрывающийся прайс при клике, только вот если к этому table у оставить display block то при margin: 0 auto таблица центрируется а если оставлять блок невидимым чтоб при клике раскрылся то таблица не центрируется
margin не помогает.

Comments

[Александр]

А можно пример в песочницу?

[Улан Мурзалиев]

Seasle,
прайс лист

№	наименование	Цена за кв/м
1	4 мм, прозрачное	11$
2	5 мм, прозрачное	13$
3	6 мм, прозрачное	15$
4	8 мм, прозрачное	21$
5	10 мм, прозрачное	23$
7	6 мм, Серое и Бронзовое	20$
8	6 мм, Crystalvision	33$
9	8 мм, бронза	25$
10	8 мм, серое	30$
11	8 мм, rystalvision	28$
12	10 мм, прозрачное	30$
13	отверстия под петли(мики маус)	3$
14	отверстия от 6мм до 100м	1$
15	изготовление нестандартных отверстий, закруглений, полировка углов, отверстий диаметром выше 100мм и т.п.	5$

.price{
margin: 0 auto;
width: 50%;
text-align: center;
background-color: #274448;
color: #fff;
font-family: "Trebuchet MS", "Lucida Sans";
padding: 3px 5px;
border-radius: 5px;

cursor: pointer;
}

.price:focus~.table,



.price:hover{
display: block;
margin: 0 auto;

}

.table{
border: 1px solid red;
display: none;
font-size: 14px;
text-align: center;
font-family: sans-serif;
border-collapse: collapse;
margin: 0 auto;
}

th, td:first-child {
background: #AFCDE7;
color: white;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 5;
border-color: white;
}
td {
background: #D8E6F3;
}
th:first-child, td:first-child {
text-align: left;
}

[Улан Мурзалиев]

Улан Мурзалиев, epta я не в песочницу скинул, сорри

[Александр]

Улан Мурзалиев, Нет, не код сюда, а на codepen или jsFiddle залить пример, чтобы там смотреть что происходит.

P. S.

[Улан Мурзалиев]

https://codepen.io/tu03422/pen/QWbNrRg

Answer 1

[Александр]

На основе песочницы, таблицу оборачиваем в «обёртку», например в div.wrapper. В CSS для .wrapper пишем

.wrapper {
  display: flex;
  justify-content: center;
}

, у .table убираем display: none и ставим его в .wrapper. Для селектора .price:hover ~ .table меняем .table на .wrapper

Comments

[Улан Мурзалиев]

спасибо. получилось.