通过使用display：table-cell用于表行，display：block用于td表

时间：2019-01-16 09:16:24

标签： html css html-table mobile-devices

我有一张国家/地区名称表，根据字母分为3列。 在移动设备上，我想将表格行更改为一列，但不再按字母排序。

因此，为了解决该问题，首先我通过为表行添加display:table-cell将表行更改为列，然后通过为表单元格添加display:block来阻止表单元格，但display块没有工作。

这是我的代码：

@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 :(得分：1)

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

编辑：

鉴于您希望保留国家/地区的字母顺序，因此我认为如果不使用JavaScript，就不能将其作为<table>来使用。因此，您应该考虑使用其他布局，例如 css grid，flexbox或 columns。

注意：现在我考虑了一下，您的特定数据集不是不是，实际上tables应该用于什么（不是二维数据），以及you shouldn't use tables for layout

  

HTML <table>元素代表表格数据-即在二维表格中显示的信息，该表格由包含数据的单元格的行和列组成。

Grid 

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

Columns 

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

相关问题
最新问题