Горизонтальные полосы у ячеек. Как убрать?
Как убрать горизонтальные полосы у ячеек. border: none - не работает, border-collapse:collapse - тоже. Отступ убирается если убрать у .window transform translate, но тогда блок уже не по центру стоит. Можно ли убрать как то этот отступ при использовании transform translate
@font-face {
font-family: "Gotham Pro";
src: url(../fonts/gothampro.ttf);
}
@font-face {
font-family: "Gotham Pro bold";
src: url(../fonts/gothampro_bold.ttf);
}
/* Window */
.window {
width: max-content;
height: auto;
padding: 2.0833vw 2.864583vw 1.40625vw 2.864583vw;
border-radius: 0.5208333333333334vw;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.window .header {
font-size: 1.354167vw;
color: #ebae0b;
font-weight: bolder;
font-family: "Gotham Pro bold";
text-align: center;
}
.window .light {
color: #ffcc00;
}
.window .about {
font-size: 0.8333333333333334vw;
color: #ffffff;
font-weight: bold;
font-family: "Gotham Pro";
align-self: flex-start;
text-align: left;
margin: 1vw 0 1.5vw 0;
line-height: 1.2vw;
}
.window .choise {
display: flex;
align-items: center;
justify-content: center;
}
.window input {
width: 100%;
height: 61px;
border-radius: 0.5208333333333334vw;
background-color: rgba(0, 0, 0, 0.6);
border: none;
text-align: center;
font-size: 0.8333333333333334vw;
color: rgba(255, 255, 255, 1);
font-weight: bold;
font-family: "Gotham Pro";
text-align: center;
margin-bottom: 0.72917vw;
}
.window ::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.2);
}
body {
-webkit-user-select: none;
}
/* BACKGROUND */
.bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: url('../img/bg4.png');
filter: grayscale(1) saturate(0%) opacity(0.12);
background-size: 100%;
background-position: 10% 45%;
}
.bg1::before {
background-size: 100%;
background-position: 49% 64%;
}
.bg2::before {
background-size: 180%;
background-position: 49% 64%;
}
#f {
color: #5da56c;
}
/* MENU */
.menu {
margin: 0.5vw;
display: inline-block;
flex-direction: column;
overflow-x: hidden;
height: 23.4vw;
}
.menu_1 {
width: 100%;
}
.menu::-webkit-scrollbar {
width: 0.260417vw;
}
.menu::-webkit-scrollbar-track {
background: rgba(169, 118, 118, 0.07);
}
.menu::-webkit-scrollbar-thumb {
background-image: linear-gradient(0deg, #ff9600 0%, #ffcc00 100%);
}
.wrap {
margin: 0.4vw 0 -0.5vw;
flex-direction: column;
}
.table {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: "header header header ";
/* border: 1px solid white; */
width: 37.86458334vw;
margin: 0.2864584vw 0.46875vw;
}
.item .table {
margin: 0;
}
.item .table .column {
color: #ffffff;
}
.table .column {
font-size: 0.834vw;
color: #ffca00;
font-weight: bold;
font-family: "Gotham Pro";
text-align: center;
text-align: left;
padding: 0 1vw;
/* border: 1px solid white; */
}
.menu .active .column {
color: #1a1919;
}
.table .column:nth-child(2) {
padding: 0;
}
.one_item {
background-color: #ffca00;
}
.menu .item {
height: 2.5vw;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.6);
font-size: 0.8334vw;
color: white;
display: flex;
font-weight: bold;
font-family: "Gotham Pro";
align-items: center;
margin: 0.3864584vw 1vw;
box-sizing: content-box;
padding: 0vw 1.2vw;
}
.menu .item_table {
height: 2.5vw;
background-color: #5da56c;
font-size: 0.8334vw;
color: white;
font-weight: bold;
font-family: "Gotham Pro";
align-items: center;
margin: 0.3864584vw 1vw;
box-sizing: content-box;
padding: 0vw 1.2vw;
}
.menu .item2 {
width: auto;
}
.menu .active {
background-image: linear-gradient(0deg, #ff9600 0%, #ffcc00 100%);
color: #1a1919;
}
.active span {
color: #1a1919 !important;
}
.menu .item:hover {
background-color: rgba(62, 62, 62, 0.6);
}
.menu .item span {
padding-right: 0.4vw;
color: #ffcc00;
}
.menu .active span {
color: #1a1919;
}
.color_text_active {
color: #1a1919;
}
/* Buttons */
.btn {
width: 7.2917vw;
height: 2.447917vw;
font-size: 0.78125vw;
color: #ffffff;
font-weight: 500;
font-family: "Gotham Pro";
display: flex;
align-items: center;
justify-content: center;
margin: 0.2864583vw;
}
.success {
background-image: linear-gradient(-90deg, #5da56c 0%, #60c760 100%);
box-shadow: 0px 0px 0.78125vw 0.250625vw rgba(71, 155, 65, 0.5);
}
.success:hover {
box-shadow: 0px 0px 0.78125vw 0.250625vw rgba(71, 155, 65, 0.7);
}
.discard {
display: none;
background-image: linear-gradient(-90deg, #913f3f 0%, #ca5555 100%);
box-shadow: 0px 0px 0.78125vw 0.250625vw rgba(154, 65, 65, 0.5);
}
.discard:hover {
box-shadow: 0px 0px 0.78125vw 0.250625vw rgba(154, 65, 65, 0.7);
}
/* HIDE */
.hide {
display: none;
}
.window_1 {
display: none;
}
.window_2 {
display: block;
}
.window_3 {
display: none;
}
.window_4 {
display: none;
}
table {
border-spacing: 3px;
border-collapse: collapse;
}
table td {
padding: 0 1vw;
vertical-align: middle;
}
tr td:first-of-type {
border-top-left-radius: 1vw;
border-bottom-left-radius: 1vw;
}
tr td:last-of-type {
border-top-right-radius: 1vw;
border-bottom-right-radius: 1vw;
}
.window_2 .item {
min-width: 13vw;
}
.window_4 .column {
font-size: 0.834vw;
color: #ffca00;
font-weight: bold;
font-family: "Gotham Pro";
padding: 0 1vw;
}
<div class="window_2">
<div class="window bg">
<div id="header_1" class="header light">Панель управления главного</div>
<div class="menu">
<table>
<tr class="item_table">
<td>ggggg</td>
<td>ggggg</td>
</tr>
</table>
</div>
<div class="choise">
<div id="btn_success_2" class="btn success">Выбрать</div>
<div id="btn_discard_2" class="btn discard">Закрыть</div>
</div>
</div>
</div>
Ответы (1 шт):
Автор решения: vovaVS
→ Ссылка
Решил проблему, немного отредактировал .window
.window{
width: max-content;
height: auto;
padding: 2.0833vw 2.864583vw 1.40625vw 2.864583vw;
border-radius: 0.5208333333333334vw;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
