Вопросы Теги

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

Решение:

Использовать шаблонный модификатор sU получит желаемое соответствие в PHP.

example: 

preg_match('/(.*)/sU',$content,$match);

Источник:

http://dreamluverz.com/developers-tools/regex-match-all-including-newline http://php.net/manual/en/reference.pcre .pattern.modifiers.php

0
задан Vadim Ovchinnikov 23 January 2019 в 12:08
поделиться

1 ответ

<td> и amp; <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>

Редактировать:

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

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

Элемент 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 ] [1129] 

@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>

0
ответ дан ksav 23 January 2019 в 12:08
поделиться