How to easily create a multi-column table on a PC and a single-column table on a smartphone

I will explain how to easily create a multi-column table on a PC and a single-column table on a smartphone.

The biggest problem with PC display and smartphone display is that it is very difficult to know where to erase and what to display on the border.

Explains how to do this easily with a short description. You don't have to worry about even or odd numbers of items.

Multi-column display on PC

Use the table tag and "border-collapse: collapse;" for multi-column display with borders on the PC. "Border-collapse: collapse;" is a function that combines adjacent borders into one. The width of the table must be specified to accommodate smartphone display. In this sample, it is set to 100%.

Item 1	Item 2
Item 3	Item 4

<table style = "border-collapse: collapse; width: 100%;">
  <tr>
    <td style = "border: 1px solid orange;"> Item 1 </td>
    <td style = "border: 1px solid orange;"> Item 2 </td>
  </tr>
  <tr>
    <td style = "border: 1px solid orange;"> Item 3 </td>
    <td style = "border: 1px solid orange;"> Item 4 </td>
  </tr>
</table>

Singular column display on smartphones

To display a singular column on a smartphone, first set the td tag to "display: block;". Then, the function of the table cell of td is lost and it becomes just a block element, and the width becomes 100%. The effect of "border-collapse: collapse;" is lost and the borders are doubled.

Item 1	Item 2
Item 3	Item 4

<table style = "border-collapse: collapse; width: 100%;">
  <tr>
    <td style = "display: block; border: 1px solid orange;"> Item 1 </td>
    <td style = "display: block; border: 1px solid orange;"> Item 2 </td>
  </tr>
  <tr>
    <td style = "display: block; border: 1px solid orange;"> Item 3 </td>
    <td style = "display: block; border: 1px solid orange;"> Item 4 </td>
  </tr>
</table>

Then remove the border below the td tag and underline it below the table tag.

Item 1	Item 2
Item 3	Item 4

<table style = "border-collapse: collapse; width: 100%; border-bottom: 1px solid orange;">
  <tr>
    <td style = "display: block; border: 1px solid orange; border-bottom: none;"> Item 1 </td>
    <td style = "display: block; border: 1px solid orange; border-bottom: none;"> Item 2 </td>
  </tr>
  <tr>
    <td style = "display: block; border: 1px solid orange; border-bottom: none;"> Item 3 </td>
    <td style = "display: block; border: 1px solid orange; border-bottom: none;"> Item 4 </td>
  </tr>
</table>

Isn't it better not to use the

table tag in responsive design?

Isn't it better not to use the table tag in responsive design?

Yes, such an idea exists.

On the other hand, the Perl seminar's introduction to HTML / CSS aims to explain how to actually write in HTML and CSS with a short number of characters and reduce complexity.

HTML・CSS Writing 2022