I have a table of country names which is sorted in 3 columns according to alphabet. On mobile device, I want to change the table row to one column but it is no longer sorted by alphabet.
So for fixing the problem, at first I changed the table row to column by adding display:table-cell for a table row then I blocked the table cell by adding display:block for table cell but display block does not work.
Here is my code:
@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><td> & <tr> should both display as blocks at mobile.
@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>Given that you want the alphabetical order of the countries to remain, I don't think you can do this as a <table> without using javascript. So you should consider another layout such as css grid, flexbox, or columns.
Note: Now that i think about it, your particular dataset is not really what tables should be used for (it's not 2-dimensional data), and you shouldn't use tables for layout.
The HTML
<table>element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
@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>@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>