By using display: table-cell for table row, display:block for td table not work

Question

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>

Try replacing `display: block;` with `display: block !important;`. If that doesn't work I would suggest replacing the display of `tr` to `flex`. — Shai, Jan 16 '19 at 09:24
Please go read [ask] and [mcve], and edit your question accordingly. — misorude, Jan 16 '19 at 10:10

ksav · Accepted Answer · 2019-01-18T11:06:09.667

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

Edit:

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.

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>

It works by alone but when I use with table-cell for tr, it does not work — Zoha, Jan 16 '19 at 09:45
No, it does not work. Because in this way, which has displayed all them in one column, countries name are not sorted based on the name (no arrangement base on first alphabet of each country). — Zoha, Jan 18 '19 at 06:34
These solution also have the same problem, they don't support the arrangement of first alphabet of each country on mobile devices — Zoha, Jan 18 '19 at 10:10
Not true. I accidentally pasted the countries in the wrong order. Check the flexbox & grid examples again :) — ksav, Jan 18 '19 at 10:14
Ahh, I see now. You want the countries to go down the columns in alphabetical order? Try css columns! Check the answer again ;) — ksav, Jan 18 '19 at 10:50
I'm glad we got there in the end. Click the ✓ to accept this answer. — ksav, Jan 18 '19 at 11:09

By using display: table-cell for table row, display:block for td table not work

1 Answers1

Edit:

Grid

Flexbox

Columns