Блог

Главная - Вопросы по программированию - td: n-й дочерний порядок изменения td

td: n-й дочерний порядок изменения td

#html #css

#HTML #css

Вопрос:

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

 @media screen and (min-width: 200px) and (max-width: 872px) {
td :nth-child(1) {display:bottom}


td :nth-child(2) {display:top}

} 
 <table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
   dhklsadhfjl;skdjflskdjfzx,nc,zmxnv;lkjdfsd;lakfjas,nxc
</td>
    <td><div class="w3-content w3-section" style="max-width:500px">

  <img class="mySlides w3-animate-fading" src="1ma63N35/1.jpg" style="width:100%">
  <img class="mySlides w3-animate-fading" src="1ma63N35/2.jpg" style="width:100%">
  <img class="mySlides w3-animate-fading" src="1ma63N35/3.jpg" style="width:100%">
  <img class="mySlides w3-animate-fading" src="1ma63N35/4.jpg" style="width:100%">
    <img class="mySlides w3-animate-fading" src="1ma63N35/5.jpg" style="width:100%">
</div></td>
  </tr>
</table>

css

@экран мультимедиа и (минимальная ширина: 200 пикселей) и (максимальная ширина: 872 пикселя) { td: n-й дочерний элемент (1) {отображение: внизу}

td: n-й дочерний (2) {отображение: верхнее}

}

Комментарии:

1. bottom и top являются недопустимыми display значениями.

2. И это тоже не похоже на табличные данные. Используете ли вы table здесь для макета?

3. если вы хотите разметку не для данных, используйте css-grid . Даже flexboxes будут работать. Там вы можете объявить порядок или размещение.

Ответ №1:

лучший способ сделать это — использовать css-grid. он выполняет табличный стиль без ограничений или сложного кодирования таблицы. С помощью grid-area вы можете легко изменить порядок листинга.

 .grid {
  display: grid;
  grid-template-columns: auto minmax(min-content, 500px);
  grid-auto-rows: auto;
  grid-gap: 10px;
}

img {
  display: block;
}

@media only screen 
  and (min-width: 200px) 
  and (max-width: 872px) {
    .grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        "pictures"
        "text";
    }
    
    .pictures {
      grid-area: pictures;
    }
    
    .text {
      grid-area: text;
    }
} 
 <div class="grid">
  <div class="text">
   dhklsadhfjl; skdjflskdjfzx, nc, zmxnv; lkjdfsd; lakfjas, nxc
  </div>
  <div class="pictures">
    <img class="mySlides w3-animate-fading"
         src="1ma63N35/1.jpg">
    <img class="mySlides w3-animate-fading"
         src="1ma63N35/2.jpg">
    <img class="mySlides w3-animate-fading"
         src="1ma63N35/3.jpg">
    <img class="mySlides w3-animate-fading"
         src="1ma63N35/4.jpg">
    <img class="mySlides w3-animate-fading"
         src="1ma63N35/5.jpg">
  </div>
</div>
Метки: