Как убрать эти(скрин) полоски из таблицы?

Question

[Elbakidze]

Как убрать полоски из таблицы:
Код:

<style>.items__box{width:100%;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: start;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;min-width: 100%;margin: 0 -1px -1px 0;}.item{max-width:325px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-align-items: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;width: 100%;height: 100%;padding: 0 15px 0 0;font-size: 16px;color: #3c3e44;position: relative;-webkit-transition: color .4s ease;transition: color .4s ease;width: calc(100% - 68.34%);height: 75px;border-right: solid 1px #dddede;border-bottom: solid 1px #dddede;-webkit-transition: box-shadow .4s ease-out,color .4s ease;transition: box-shadow .4s ease-out,color .4s ease;}.item svg:last-child{width: 10px;height: auto;fill: none;stroke: #8c8c8c;-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);}.item svg:first-child{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-align-items: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;width: 70px;}.item div{    -webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;font-weight: bold;font-family: "Ubuntu",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}.box{border: solid 1px #dddede;border-radius: 4px;max-width: 960px;border-right:0px;}.item{text-decoration:none;}.item:hover{color: #069ed4;box-shadow: 0 0 20px 0 rgba(0,0,0,.2);cursor:pointer;}@media screen and (max-width:600px){.items__box{flex-direction:column;}.item{max-width:100%;width:100%;}}</style>
<div class="box">
<div class="items__box">
  
	
	<a href="https://sps-sng.ru/luchshie-predlozheniya-po-kreditam" target="_blank" class="item">
    <svg viewBox="0 0 36 36" width="36" height="36"><g fill="none" fill-rule="evenodd"><path fill="#CCF0FF" d="M-.01 20C9.937 20 18 11.941 18 2H-.01v18z"></path><g stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M30 22.153V26a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2h22a2 2 0 0 1 2 2v3.076"></path><path d="M32 22h-7.207C22.707 22 21 20.298 21 18.22v-.439C21 15.701 22.707 14 24.793 14H32v8zM25 18h2"></path></g><path stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12v12"></path></g></svg>
    <div class="item-title">Подбор кредита</div>
    <svg viewBox="0 0 8.1 4.8" class="sc-1e9iwkn-6 inuIda"><path d="M7.8.4L4.1 4.1.4.4"></path></svg>
  </a>
	<a href="https://sps-sng.ru/luchshie-predlozheniya-po-debetovym-kartam" target="_blank" class="item">
    <svg viewBox="0 0 36 36" width="36" height="36"><g fill="none" fill-rule="evenodd"><path fill="#CCF0FF" d="M36.01 16C26.063 16 18 24.059 18 34h18.01V16z"></path><g stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(4 9)"><path d="M3 0h22a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zM4 13h2M10 13h2M16 13h2M22 13h2"></path><circle cx="6" cy="6" r="2"></circle></g></g></svg>
    <div class="item-title">Дебетовые карты</div>
    <svg viewBox="0 0 8.1 4.8" class="sc-1e9iwkn-6 inuIda"><path d="M7.8.4L4.1 4.1.4.4"></path></svg>
  </a>
	<a href="https://sps-sng.ru/luchshie-predlozheniya-po-kreditnym-kartam" target="_blank" class="item">
    <svg viewBox="0 0 36 36" width="36" height="36"><g fill="none" fill-rule="evenodd"><circle cx="28" cy="8" r="8" fill="#CCF0FF" fill-rule="nonzero"></circle><rect width="28" height="18" x="4" y="9" stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" rx="3"></rect><path stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 22h2M14 22h2M20 22h2M26 22h2"></path><circle cx="10" cy="15" r="2" stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle></g></svg>
    <div class="item-title">Кредитные карты</div>
    <svg viewBox="0 0 8.1 4.8" class="sc-1e9iwkn-6 inuIda"><path d="M7.8.4L4.1 4.1.4.4"></path></svg>
  </a>
	<a href="https://sps-sng.ru/luchshie-predlozheniya-po-zajmam" target="_blank" class="item">
    <svg viewBox="0 0 36 36" width="36" height="36"><g fill="none" fill-rule="evenodd"><path fill="#CCF0FF" d="M18 2c0 9.941 8.059 18 18 18V2H18z"></path><g stroke="#00AFFF" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 24.692V28h26V14h-3.102"></path><path stroke-linecap="round" stroke-linejoin="round" d="M3 24h26V10H3z"></path><path stroke-linecap="square" d="M8.5 11v13M23.5 11v13"></path><path stroke-linecap="round" stroke-linejoin="round" d="M12 14h3-3zM17 20h3-3z"></path></g></g></svg>
    <div class="item-title">Займы</div>
    <svg viewBox="0 0 8.1 4.8" class="sc-1e9iwkn-6 inuIda"><path d="M7.8.4L4.1 4.1.4.4"></path></svg>
  </a>
	<a href="https://sps-sng.ru/otkryt-raschetnyj-schet-dlya-ip" target="_blank" class="item">
    <svg viewBox="0 0 36 36" width="36" height="36"><g fill="none" fill-rule="evenodd"><path fill="#CCF0FF" d="M36 16c-9.941 0-18 8.059-18 18h18V16z"></path><path stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.005 28v2M26.005 28v2"></path><rect width="26" height="22" x="5" y="6" stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" rx="2" transform="rotate(-180 18 17)"></rect><path stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M26.005 23h-16V11h16z"></path><circle cx="16" cy="17" r="2" stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle><path stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M25.005 15h2M25.005 19h2"></path></g></svg>
    <div class="item-title">Счет РКО</div>
    <svg viewBox="0 0 8.1 4.8" class="sc-1e9iwkn-6 inuIda"><path d="M7.8.4L4.1 4.1.4.4"></path></svg>
  </a>
	<a href="https://sps-sng.ru/luchshie-predlozheniya-po-refinansirovaniyu" target="_blank" class="item">
    <svg viewBox="0 0 36 36" width="36" height="36"><g fill="none" fill-rule="evenodd"><circle cx="8" cy="10" r="8" fill="#CCF0FF" fill-rule="nonzero"></circle><g stroke="#00B0FF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M7.188 27.222C3.805 22.17 4.345 15.27 8.808 10.808c5.076-5.077 13.308-5.077 18.384 0 4.463 4.462 5.003 11.362 1.62 16.414"></path><path d="M20.043 17.957a2.889 2.889 0 11-4.086 4.086 2.889 2.889 0 014.086-4.086M18 7v2.889m6.5-1.141l-1.257 2.166M11.5 8.748l1.257 2.166M6.748 13.5l2.166 1.257M31 20h-2.167M7.167 20H5m15.586-1.257l8.666-5.243"></path></g></g></svg>
    <div class="item-title">Рефинансир<br>ование</div>
    <svg viewBox="0 0 8.1 4.8" class="sc-1e9iwkn-6 inuIda"><path d="M7.8.4L4.1 4.1.4.4"></path></svg>
  </a>
	
</div>
</div>

Comments

[BloodVIRUS]

Это называется "гадание по айпи". Без полного кода со всеми стилями вряд-ли кто-то подскажет.

[Elbakidze]

BloodVIRUS, тут все стили вроде как, это я в вордпресс вставляю

[BloodVIRUS]

Elbakidze, и правда. Первый раз видимо я в кривую онлайн песочницу вставлял, стили там не подгружались.

[Elbakidze]

BloodVIRUS, как убрать эти полоски не подскажите

[Юрий]

Там вообще какой-то адище в CSS, если честно.
Полоски от того, что верхний и нижний бордер заданы для родительского элемента (items__box), а все остальные для вложенных. При этом родительский элемент шириной 100%, а у вложенных задана максимальная ширина в 325 пикселей. Соответственно, когда родительский элемент шире, чем 325*3, появляются ваши полоски. И всё это непонятно зачем свёрстано на флексах, притом что флексы по сути не используются никак.

Если вкратце:

.item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 15px 0 0;
  font-size: 16px;
  color: #3c3e44;
  position: relative;
  -webkit-transition: color .4s ease;
  transition: color .4s ease;
  height: 75px;
  border-right: solid 1px #dddede;
  border-bottom: solid 1px #dddede;
  -webkit-transition: box-shadow .4s ease-out, color .4s ease;
  transition: box-shadow .4s ease-out, color .4s ease;

  /* убрать у .item ширину и добавить флекс */
  flex: 0 0 33.33333%;
  box-sizing: border-box;
}

[Elbakidze]

Юрий, я не бум бум. Пожалуйста напишите какой код мне нужно вставить

[Ankhena]

Как-то так
https://jsfiddle.net/hopevbk5/

Answer 1

[BloodVIRUS]

Уберите стиль:

.box {
    border: solid 1px #dddede;

Вместо него укажите:

.box {
    border-left: solid 1px #dddede;
}

И добавьте стиль:

.item:nth-child(-n+2) {
  border-top: 1px #dddede solid;
}

Comments

[Elbakidze]

Почему то полоска пропала

[Ankhena]

Elbakidze, поправьте nth-child

[Elbakidze]

Ankhena, как

[Elbakidze]

Ankhena, Вообще вот стало:

[Ankhena]

Elbakidze,
Не знаю, что вы и как поправили.
Автор ответа ошибся, написал -n+2, вам нужно для трех ячеек, а не для двух...

[BloodVIRUS]

Ankhena, Я не ошибся. У меня в песочнице 2 ячейки отображалось, по этому написал 2. У автора их 3 отображается. Видимо там адаптив, и если у автора всегда 3 ячейки будут отображаться, то -n+3 выход. Если же нет - думать нужно.

[Elbakidze]

Ankhena, Не чего не могу понять. Смотрите вставляю вместо

.box {
    border: solid 1px #dddede;

Это

.box {
    border-left: solid 1px #dddede;

И добавляю это

.item:nth-child(-n+3) {
  border-top: 1px #dddede solid;
}

и пропадает верхняя часть

[Elbakidze]

BloodVIRUS, Вот код

<br>
  Лучшие предложения:
<style>.items__box{width:100%;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: start;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;min-width: 100%;margin: 0 -1px -1px 0;}.item{max-width:325px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-align-items: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;width: 100%;height: 100%;padding: 0 15px 0 0;font-size: 16px;color: #3c3e44;position: relative;-webkit-transition: color .4s ease;transition: color .4s ease;width: calc(100% - 68.34%);height: 75px;border-right: solid 1px #dddede;border-bottom: solid 1px #dddede;-webkit-transition: box-shadow .4s ease-out,color .4s ease;transition: box-shadow .4s ease-out,color .4s ease;}.item svg:last-child{width: 10px;height: auto;fill: none;stroke: #8c8c8c;-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);}.item svg:first-child{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-align-items: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;width: 70px;}.item div{    -webkit-box-flex: 1;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;font-weight: bold;font-family: "Ubuntu",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}.box{border-left: solid 1px #dddede;border-radius: 4px;max-width: 960px;border-right:0px;}.item{text-decoration:none;}.item:hover{color: #069ed4;box-shadow: 0 0 20px 0 rgba(0,0,0,.2);cursor:pointer;}@media screen and (max-width:600px){.items__box{flex-direction:column;}.item:nth-child(-n+3){border-top: 1px #dddede solid;}.item{max-width:100%;width:100%;}}</style>
  <center>
<div class="box">
<div class="items__box">
  
	
	<a href="https://sps-sng.ru/luchshie-predlozheniya-po-kreditam" target="_blank" class="item">
    <svg viewBox="0 0 36 36" width="36" height="36"><g fill="none" fill-rule="evenodd"><path fill="#CCF0FF" d="M-.01 20C9.937 20 18 11.941 18 2H-.01v18z"></path><g stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M30 22.153V26a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2h22a2 2 0 0 1 2 2v3.076"></path><path d="M32 22h-7.207C22.707 22 21 20.298 21 18.22v-.439C21 15.701 22.707 14 24.793 14H32v8zM25 18h2"></path></g><path stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12v12"></path></g></svg>
    <div class="item-title">Подбор кредита</div>
    <svg viewBox="0 0 8.1 4.8" class="sc-1e9iwkn-6 inuIda"><path d="M7.8.4L4.1 4.1.4.4"></path></svg>
  </a>
	<a href="https://sps-sng.ru/luchshie-predlozheniya-po-debetovym-kartam" target="_blank" class="item">
    <svg viewBox="0 0 36 36" width="36" height="36"><g fill="none" fill-rule="evenodd"><path fill="#CCF0FF" d="M36.01 16C26.063 16 18 24.059 18 34h18.01V16z"></path><g stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(4 9)"><path d="M3 0h22a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zM4 13h2M10 13h2M16 13h2M22 13h2"></path><circle cx="6" cy="6" r="2"></circle></g></g></svg>
    <div class="item-title">Дебетовые карты</div>
    <svg viewBox="0 0 8.1 4.8" class="sc-1e9iwkn-6 inuIda"><path d="M7.8.4L4.1 4.1.4.4"></path></svg>
  </a>
	<a href="https://sps-sng.ru/luchshie-predlozheniya-po-kreditnym-kartam" target="_blank" class="item">
    <svg viewBox="0 0 36 36" width="36" height="36"><g fill="none" fill-rule="evenodd"><circle cx="28" cy="8" r="8" fill="#CCF0FF" fill-rule="nonzero"></circle><rect width="28" height="18" x="4" y="9" stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" rx="3"></rect><path stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 22h2M14 22h2M20 22h2M26 22h2"></path><circle cx="10" cy="15" r="2" stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle></g></svg>
    <div class="item-title">Кредитные карты</div>
    <svg viewBox="0 0 8.1 4.8" class="sc-1e9iwkn-6 inuIda"><path d="M7.8.4L4.1 4.1.4.4"></path></svg>
  </a>
	<a href="https://sps-sng.ru/luchshie-predlozheniya-po-zajmam" target="_blank" class="item">
    <svg viewBox="0 0 36 36" width="36" height="36"><g fill="none" fill-rule="evenodd"><path fill="#CCF0FF" d="M18 2c0 9.941 8.059 18 18 18V2H18z"></path><g stroke="#00AFFF" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 24.692V28h26V14h-3.102"></path><path stroke-linecap="round" stroke-linejoin="round" d="M3 24h26V10H3z"></path><path stroke-linecap="square" d="M8.5 11v13M23.5 11v13"></path><path stroke-linecap="round" stroke-linejoin="round" d="M12 14h3-3zM17 20h3-3z"></path></g></g></svg>
    <div class="item-title">Займы</div>
    <svg viewBox="0 0 8.1 4.8" class="sc-1e9iwkn-6 inuIda"><path d="M7.8.4L4.1 4.1.4.4"></path></svg>
  </a>
	<a href="https://sps-sng.ru/otkryt-raschetnyj-schet-dlya-ip" target="_blank" class="item">
    <svg viewBox="0 0 36 36" width="36" height="36"><g fill="none" fill-rule="evenodd"><path fill="#CCF0FF" d="M36 16c-9.941 0-18 8.059-18 18h18V16z"></path><path stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.005 28v2M26.005 28v2"></path><rect width="26" height="22" x="5" y="6" stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" rx="2" transform="rotate(-180 18 17)"></rect><path stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M26.005 23h-16V11h16z"></path><circle cx="16" cy="17" r="2" stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle><path stroke="#00AFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M25.005 15h2M25.005 19h2"></path></g></svg>
    <div class="item-title">Счет РКО</div>
    <svg viewBox="0 0 8.1 4.8" class="sc-1e9iwkn-6 inuIda"><path d="M7.8.4L4.1 4.1.4.4"></path></svg>
  </a>
	<a href="https://sps-sng.ru/luchshie-predlozheniya-po-refinansirovaniyu" target="_blank" class="item">
    <svg viewBox="0 0 36 36" width="36" height="36"><g fill="none" fill-rule="evenodd"><circle cx="8" cy="10" r="8" fill="#CCF0FF" fill-rule="nonzero"></circle><g stroke="#00B0FF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M7.188 27.222C3.805 22.17 4.345 15.27 8.808 10.808c5.076-5.077 13.308-5.077 18.384 0 4.463 4.462 5.003 11.362 1.62 16.414"></path><path d="M20.043 17.957a2.889 2.889 0 11-4.086 4.086 2.889 2.889 0 014.086-4.086M18 7v2.889m6.5-1.141l-1.257 2.166M11.5 8.748l1.257 2.166M6.748 13.5l2.166 1.257M31 20h-2.167M7.167 20H5m15.586-1.257l8.666-5.243"></path></g></g></svg>
    <div class="item-title">Рефинансир<br>ование</div>
    <svg viewBox="0 0 8.1 4.8" class="sc-1e9iwkn-6 inuIda"><path d="M7.8.4L4.1 4.1.4.4"></path></svg>
  </a>
	
</div>
</div></center>
  <br>

Вот что получилось:

[Ankhena]

Elbakidze, теперь немножко внимательности

Вы применили верхнюю границу к .item, при этом блоки у вас называются вообще не так...

И да, если при адаптиве количество блоков меняется, то нужно либо дописывать @media либо задавать верхнюю границу контейнеру и менять расчеты ширины блоков.

[Elbakidze]

Ankhena, я не бумбум

[Elbakidze]

Ankhena, что нужно заменить?

[Ankhena]

Elbakidze, простите, я не права, они у вас и правда, называются .item

Оформите ваш код в песочницу jsfiddle.net и дайте ссылку в комментария к самому вопросу (не сюда)

[Максим]

Elbakidze, https://codepen.io/topicstarter/pen/wvGoZMR - так ?

[Elbakidze]

Много Чего, https://codepen.io/sergey-elbakidze/pen/RwaoOaM

[Максим]

Elbakidze, https://codepen.io/topicstarter/pen/LYNbvZL так ?

[Elbakidze]

Много Чего,

[Максим]

Elbakidze, ну и ...что требуется ?

[Elbakidze]

Много Чего, видите столбец кредитные карты. Там нету верхней полоски

[Максим]

Elbakidze, есть же ...

[Elbakidze]

Много Чего, Дайте ссылку

[Максим]

Elbakidze, извените заметил - исправил https://codepen.io/topicstarter/pen/LYNbvZL

[Elbakidze]

Много Чего, Спасибо большое всем

[Максим]

Moon Presence, да ладно ...отметьте этот ответ

[Elbakidze]

Много Чего, ок