Используя display: table-cell для строки таблицы, display: block для таблицы td не работает - PullRequest
Новая
       47

Используя display: table-cell для строки таблицы, display: block для таблицы td не работает

0 голосов
/ 16 января 2019

У меня есть таблица названий стран, которая сортируется в 3 столбца по алфавиту. На мобильном устройстве я хочу изменить строку таблицы на один столбец, но она больше не сортируется по алфавиту.

Итак, для решения проблемы сначала я изменил строку таблицы на столбец, добавив display:table-cell для строки таблицы, затем заблокировал ячейку таблицы, добавив display:block для ячейки таблицы, но блок отображения не работает.

Вот мой код: 

@media screen and (max-width:767px) {
  table tr {
    display: table-cell !important;
  }
  table td {
    display: block;
    width: 100% !important;
  }
}
<table>
  <tr>
    <td>Afghanistan</td>
    <td>Grenada</td>
    <td>Palau</td>
  </tr>
  <tr>
    <td>Albania</td>
    <td>Guatemala</td>
    <td>Panama</td>
  </tr>
  <tr>
    <td>Algeria</td>
    <td>Guinea</td>
    <td>Papua New Guinea</td>
  </tr>
  <tr>
    <td>American Samoa</td>
    <td>Guinea-Bissau</td>
    <td>Paraguay</td>
  </tr>
  <tr>
    <td>Angola</td>
    <td>Guyana</td>
    <td>Peru</td>
  </tr>
  <tr>
    <td>Argentina</td>
    <td>Haiti</td>
    <td>Philippines</td>
  </tr>
  <tr>
    <td>Armenia</td>
    <td>Honduras</td>
    <td>Romania</td>
  </tr>
  <tr>
    <td>
      Azerbaijan</td>
    <td>India</td>
    <td>Rwanda</td>
  </tr>
  <tr>
    <td>Bangladesh</td>
    <td>Indonesia</td>
    <td>Samoa</td>
  </tr>
  <tr>
    <td>Belarus</td>
    <td>Iran</td>
    <td>São Tomé and Principe</td>
  </tr>
  <tr>
    <td>Belize</td>
    <td>Iraq</td>
    <td>Senegal</td>
  </tr>
  <tr>
    <td>Benin</td>
    <td>Jamaica</td>
    <td>Serbia</td>
  </tr>
  <tr>
    <td>Bhutan</td>
    <td>Jordan</td>
    <td>
      Sierra Leone</td>
  </tr>
  <tr>
    <td>Bolivia</td>
    <td>
      Kazakhstan</td>
    <td>Solomon Islands</td>
  </tr>
  <tr>
    <td>
      Bosnia and Herzegovina</td>
    <td>Kenya</td>
    <td>Somalia</td>
  </tr>
  <tr>
    <td>Botswana</td>
    <td>Kiribati</td>
    <td>South Africa</td>
  </tr>
  <tr>
    <td>Brazil</td>
    <td>Korea</td>
    <td>South Sudan</td>
  </tr>
  <tr>
    <td>Bulgaria</td>
    <td>Kosovo</td>
    <td>Sri Lanka</td>
  </tr>
  <tr>
    <td>Burkina Faso</td>
    <td>Kyrgyz Republic</td>
    <td>St. Lucia</td>
  </tr>
  <tr>
    <td>Burundi</td>
    <td>Lao</td>
    <td>St. Vincent and the Grenadines</td>
  </tr>
  <tr>
    <td>Cabo Verde</td>
    <td>Lebanon</td>
    <td>Sudan</td>
  </tr>
  <tr>
    <td>Cambodia</td>
    <td>Lesotho</td>
    <td>Suriname</td>
  </tr>
  <tr>
    <td>Cameroon</td>
    <td>Liberia</td>
    <td>Swaziland</td>
  </tr>
  <tr>
    <td>Central African Republic</td>
    <td>Libya</td>
    <td>Syria</td>
  </tr>
  <tr>
    <td>Chad</td>
    <td>Macedonia</td>
    <td>Tajikistan</td>
  </tr>
  <tr>
    <td>China</td>
    <td>Madagascar</td>
    <td>Tanzania</td>
  </tr>
  <tr>
    <td>Colombia</td>
    <td>Malawi</td>
    <td>Thailand</td>
  </tr>
</table>

1 Ответ

0 голосов
/ 16 января 2019

<td> и <tr> должны отображаться как мобильные блоки. 

@media screen and (max-width:767px) {
  table tr,
  table td {
    display: block;
  }
}
<table>
  <tr>
    <td>Afghanistan</td>
    <td>Grenada</td>
    <td>Palau</td>
  </tr>
  <tr>
    <td>Albania</td>
    <td>Guatemala</td>
    <td>Panama</td>
  </tr>
  <tr>
    <td>Algeria</td>
    <td>Guinea</td>
    <td>Papua New Guinea</td>
  </tr>
  <tr>
    <td>American Samoa</td>
    <td>Guinea-Bissau</td>
    <td>Paraguay</td>
  </tr>
  <tr>
    <td>Angola</td>
    <td>Guyana</td>
    <td>Peru</td>
  </tr>
  <tr>
    <td>Argentina</td>
    <td>Haiti</td>
    <td>Philippines</td>
  </tr>
  <tr>
    <td>Armenia</td>
    <td>Honduras</td>
    <td>Romania</td>
  </tr>
  <tr>
    <td>
      Azerbaijan</td>
    <td>India</td>
    <td>Rwanda</td>
  </tr>
  <tr>
    <td>Bangladesh</td>
    <td>Indonesia</td>
    <td>Samoa</td>
  </tr>
  <tr>
    <td>Belarus</td>
    <td>Iran</td>
    <td>São Tomé and Principe</td>
  </tr>
  <tr>
    <td>Belize</td>
    <td>Iraq</td>
    <td>Senegal</td>
  </tr>
  <tr>
    <td>Benin</td>
    <td>Jamaica</td>
    <td>Serbia</td>
  </tr>
  <tr>
    <td>Bhutan</td>
    <td>Jordan</td>
    <td>
      Sierra Leone</td>
  </tr>
  <tr>
    <td>Bolivia</td>
    <td>
      Kazakhstan</td>
    <td>Solomon Islands</td>
  </tr>
  <tr>
    <td>
      Bosnia and Herzegovina</td>
    <td>Kenya</td>
    <td>Somalia</td>
  </tr>
  <tr>
    <td>Botswana</td>
    <td>Kiribati</td>
    <td>South Africa</td>
  </tr>
  <tr>
    <td>Brazil</td>
    <td>Korea</td>
    <td>South Sudan</td>
  </tr>
  <tr>
    <td>Bulgaria</td>
    <td>Kosovo</td>
    <td>Sri Lanka</td>
  </tr>
  <tr>
    <td>Burkina Faso</td>
    <td>Kyrgyz Republic</td>
    <td>St. Lucia</td>
  </tr>
  <tr>
    <td>Burundi</td>
    <td>Lao</td>
    <td>St. Vincent and the Grenadines</td>
  </tr>
  <tr>
    <td>Cabo Verde</td>
    <td>Lebanon</td>
    <td>Sudan</td>
  </tr>
  <tr>
    <td>Cambodia</td>
    <td>Lesotho</td>
    <td>Suriname</td>
  </tr>
  <tr>
    <td>Cameroon</td>
    <td>Liberia</td>
    <td>Swaziland</td>
  </tr>
  <tr>
    <td>Central African Republic</td>
    <td>Libya</td>
    <td>Syria</td>
  </tr>
  <tr>
    <td>Chad</td>
    <td>Macedonia</td>
    <td>Tajikistan</td>
  </tr>
  <tr>
    <td>China</td>
    <td>Madagascar</td>
    <td>Tanzania</td>
  </tr>
  <tr>
    <td>Colombia</td>
    <td>Malawi</td>
    <td>Thailand</td>
  </tr>
</table>

Edit:

Учитывая, что вы хотите, чтобы алфавитный порядок стран оставался, я не думаю, что вы можете сделать это как <table> без использования javascript. Поэтому вам следует рассмотреть другой макет, такой как css grid , flexbox или столбцы .

Примечание: Теперь, когда я думаю об этом, ваш конкретный набор данных не действительно, для чего следует использовать таблицы (это не двумерные данные), а вы не следует использовать таблицы для разметки .

Элемент HTML <table> представляет табличные данные, то есть информацию, представленную в двумерной таблице, состоящей из строк и столбцов ячеек, содержащих данные.

Сетка 

@media screen and (min-width: 767px) {
  .countries {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
<div class="countries"><div class="country">Afghanistan</div><div class="country">Albania</div><div class="country">Algeria</div><div class="country">American Samoa</div><div class="country">Angola</div><div class="country">Argentina</div><div class="country">Armenia</div><div class="country">Azerbaijan</div><div class="country">Bangladesh</div><div class="country">Belarus</div><div class="country">Belize</div><div class="country">Benin</div><div class="country">Bhutan</div><div class="country">Bolivia</div><div class="country">Bosnia and Herzegovina</div><div class="country">Botswana</div><div class="country">Brazil</div><div class="country">Bulgaria</div><div class="country">Burkina Faso</div><div class="country">Burundi</div><div class="country">Cabo Verde</div><div class="country">Cambodia</div><div class="country">Cameroon</div><div class="country">Central African Republic</div><div class="country">Chad</div><div class="country">China</div><div class="country">Colombia</div><div class="country">Grenada</div><div class="country">Guatemala</div><div class="country">Guinea-Bissau</div><div class="country">Guinea</div><div class="country">Guyana</div><div class="country">Haiti</div><div class="country">Honduras</div><div class="country">India</div><div class="country">Indonesia</div><div class="country">Iran</div><div class="country">Iraq</div><div class="country">Jamaica</div><div class="country">Jordan</div><div class="country">Kazakhstan</div><div class="country">Kenya</div><div class="country">Kiribati</div><div class="country">Korea</div><div class="country">Kosovo</div><div class="country">Kyrgyz Republic</div><div class="country">Lao</div><div class="country">Lebanon</div><div class="country">Lesotho</div><div class="country">Liberia</div><div class="country">Libya</div><div class="country">Macedonia</div><div class="country">Madagascar</div><div class="country">Malawi</div><div class="country">Palau</div><div class="country">Panama</div><div class="country">Papua New Guinea</div><div class="country">Paraguay</div><div class="country">Peru</div><div class="country">Philippines</div><div class="country">Romania</div><div class="country">Rwanda</div><div class="country">Samoa</div><div class="country">Senegal</div><div class="country">Serbia</div><div class="country">Sierra Leone</div><div class="country">Solomon Islands</div><div class="country">Somalia</div><div class="country">South Africa</div><div class="country">South Sudan</div><div class="country">Sri Lanka</div><div class="country">St. Lucia</div><div class="country">St. Vincent and the Grenadines</div><div class="country">Sudan</div><div class="country">Suriname</div><div class="country">Swaziland</div><div class="country">Syria</div><div class="country">São Tomé and Principe</div><div class="country">Tajikistan</div><div class="country">Tanzania</div><div class="country">Thailand</div></div>

Flexbox 

@media screen and (min-width: 767px) {
  .countries {
    display: flex;
    flex-wrap: wrap;
  }
  .country {
    flex: 1 1 33%;
  }
}
<div class="countries"><div class="country">Afghanistan</div><div class="country">Albania</div><div class="country">Algeria</div><div class="country">American Samoa</div><div class="country">Angola</div><div class="country">Argentina</div><div class="country">Armenia</div><div class="country">Azerbaijan</div><div class="country">Bangladesh</div><div class="country">Belarus</div><div class="country">Belize</div><div class="country">Benin</div><div class="country">Bhutan</div><div class="country">Bolivia</div><div class="country">Bosnia and Herzegovina</div><div class="country">Botswana</div><div class="country">Brazil</div><div class="country">Bulgaria</div><div class="country">Burkina Faso</div><div class="country">Burundi</div><div class="country">Cabo Verde</div><div class="country">Cambodia</div><div class="country">Cameroon</div><div class="country">Central African Republic</div><div class="country">Chad</div><div class="country">China</div><div class="country">Colombia</div><div class="country">Grenada</div><div class="country">Guatemala</div><div class="country">Guinea-Bissau</div><div class="country">Guinea</div><div class="country">Guyana</div><div class="country">Haiti</div><div class="country">Honduras</div><div class="country">India</div><div class="country">Indonesia</div><div class="country">Iran</div><div class="country">Iraq</div><div class="country">Jamaica</div><div class="country">Jordan</div><div class="country">Kazakhstan</div><div class="country">Kenya</div><div class="country">Kiribati</div><div class="country">Korea</div><div class="country">Kosovo</div><div class="country">Kyrgyz Republic</div><div class="country">Lao</div><div class="country">Lebanon</div><div class="country">Lesotho</div><div class="country">Liberia</div><div class="country">Libya</div><div class="country">Macedonia</div><div class="country">Madagascar</div><div class="country">Malawi</div><div class="country">Palau</div><div class="country">Panama</div><div class="country">Papua New Guinea</div><div class="country">Paraguay</div><div class="country">Peru</div><div class="country">Philippines</div><div class="country">Romania</div><div class="country">Rwanda</div><div class="country">Samoa</div><div class="country">Senegal</div><div class="country">Serbia</div><div class="country">Sierra Leone</div><div class="country">Solomon Islands</div><div class="country">Somalia</div><div class="country">South Africa</div><div class="country">South Sudan</div><div class="country">Sri Lanka</div><div class="country">St. Lucia</div><div class="country">St. Vincent and the Grenadines</div><div class="country">Sudan</div><div class="country">Suriname</div><div class="country">Swaziland</div><div class="country">Syria</div><div class="country">São Tomé and Principe</div><div class="country">Tajikistan</div><div class="country">Tanzania</div><div class="country">Thailand</div></div>

Колонны 

@media screen and (min-width: 767px) {
  .countries {
     columns: 3;
  }
}
<div class="countries"><div class="country">Afghanistan</div><div class="country">Albania</div><div class="country">Algeria</div><div class="country">American Samoa</div><div class="country">Angola</div><div class="country">Argentina</div><div class="country">Armenia</div><div class="country">Azerbaijan</div><div class="country">Bangladesh</div><div class="country">Belarus</div><div class="country">Belize</div><div class="country">Benin</div><div class="country">Bhutan</div><div class="country">Bolivia</div><div class="country">Bosnia and Herzegovina</div><div class="country">Botswana</div><div class="country">Brazil</div><div class="country">Bulgaria</div><div class="country">Burkina Faso</div><div class="country">Burundi</div><div class="country">Cabo Verde</div><div class="country">Cambodia</div><div class="country">Cameroon</div><div class="country">Central African Republic</div><div class="country">Chad</div><div class="country">China</div><div class="country">Colombia</div><div class="country">Grenada</div><div class="country">Guatemala</div><div class="country">Guinea-Bissau</div><div class="country">Guinea</div><div class="country">Guyana</div><div class="country">Haiti</div><div class="country">Honduras</div><div class="country">India</div><div class="country">Indonesia</div><div class="country">Iran</div><div class="country">Iraq</div><div class="country">Jamaica</div><div class="country">Jordan</div><div class="country">Kazakhstan</div><div class="country">Kenya</div><div class="country">Kiribati</div><div class="country">Korea</div><div class="country">Kosovo</div><div class="country">Kyrgyz Republic</div><div class="country">Lao</div><div class="country">Lebanon</div><div class="country">Lesotho</div><div class="country">Liberia</div><div class="country">Libya</div><div class="country">Macedonia</div><div class="country">Madagascar</div><div class="country">Malawi</div><div class="country">Palau</div><div class="country">Panama</div><div class="country">Papua New Guinea</div><div class="country">Paraguay</div><div class="country">Peru</div><div class="country">Philippines</div><div class="country">Romania</div><div class="country">Rwanda</div><div class="country">Samoa</div><div class="country">Senegal</div><div class="country">Serbia</div><div class="country">Sierra Leone</div><div class="country">Solomon Islands</div><div class="country">Somalia</div><div class="country">South Africa</div><div class="country">South Sudan</div><div class="country">Sri Lanka</div><div class="country">St. Lucia</div><div class="country">St. Vincent and the Grenadines</div><div class="country">Sudan</div><div class="country">Suriname</div><div class="country">Swaziland</div><div class="country">Syria</div><div class="country">São Tomé and Principe</div><div class="country">Tajikistan</div><div class="country">Tanzania</div><div class="country">Thailand</div></div>
...