Остановить ячейки таблицы от перекрытия HTML CSS - PullRequest
Новая
       25

Остановить ячейки таблицы от перекрытия HTML CSS

2 голосов
/ 03 июня 2019

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

Ширина установлена ​​на 100%, а не на фиксированную ширину, поэтому не уверен, почему этоэто происходит?Код, который у меня есть ниже: 

.infocard {
  position: relative;
  width: 100%;
  height: auto;
}

.infocard img {
  position: absolute;
  width: 100%;
}

.infocard .infocardimage {
  z-index: 9999;
  transition: opacity .5s ease;
  cursor: pointer;
}

.infocard:hover .infocardimage {
  opacity: 0;
}

.tableproperties {
  width: 100%;
  height: 50%;
}
<table class="tableproperties">
  <tbody>
    <tr>
      <td>
        <div class="infocard">
          <img alt="" class="infocardimage" src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" />
          <img alt="" class="infocardoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
        </div>
      </td>
      <td>
        <div class="infocard">
          <img alt="" class="infocardimage" src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" />
          <img alt="" class="infocardoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="infocard">
          <img alt="" class="infocardimage" src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" />
          <img alt="" class="infocardoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
        </div>
      </td>
      <td>
        <div class="infocard">
          <img alt="" class="infocardimage" src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" />
          <img alt="" class="infocardoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
        </div>
      </td>
      <td>
    </tr>
  </tbody>
</table>

Мне нужно, чтобы строки не перекрывались при изменении размера экрана и чтобы промежуток не увеличивался при уменьшении экрана.

1 Ответ

1 голос
/ 04 июня 2019

Решением было добавить селектор img + img в css вместе с сопровождающим html: 

*{
  box-sizing:border-box;
}
.card {
  float: left;
  width: 33.33%;
  padding: 5px;
  position:relative;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
.imageoverlay{
  display:none;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  padding: 5px;
}
.card:hover img + img{
  display:block;
  
}
<div class="row">
  <div class="card">
    <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" alt="Snow" style="width:100%">
    <img class="imageoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
  </div>
  <div class="card">
    <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" alt="Forest" style="width:100%">
     <img class="imageoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
  </div>
  <div class="card">
    <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" alt="Forest" style="width:100%">
     <img class="imageoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
  </div>
</div>
<div class="row">
  <div class="card">
    <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" alt="Snow" style="width:100%">
     <img class="imageoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
  </div>
  <div class="card">
    <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" alt="Forest" style="width:100%">
     <img class="imageoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
  </div>
  <div class="card">
    <img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" alt="Forest" style="width:100%">
     <img class="imageoverlay" src="http://barricadeprinters.com/wp-content/uploads/2018/10/16-9placeholder.png" />
  </div>
</div>
...