Shulou(Shulou.com)06/01 Report--

CSS and HTML comparison tables are a powerful way to instantly communicate to visitors the main features of your product and their differences. In general, the comparison table and the pricing table are the same. For me, the difference with the comparison table is that it should contain an extra column that lists all the available features. This makes it easy to compare plans and find out the differences between them.

HTML marker

For markings, I'm trying to make them as clean and simple as possible. I decided to use the external main DIV element, followed by a series of UL lists to render each "row" content in the comparison table:

The comparison table must consist of multiple UL stacked on top of each other. I'll use CSS flex boxes to make them equal in width and expand and contract at the same rate, so they behave like rows in a table.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

thirty-six

thirty-seven

thirty-eight

thirty-nine

forty

forty-one

forty-two

forty-three

forty-four

forty-five

forty-six

forty-seven

forty-eight

forty-nine

fifty

fifty-one

Office chair

Eurotech

Hbada

Zenith

Amazonbasics

Weight

25 kilograms

13 kilograms

17 kilograms

28 kilograms

Expenses

$

$

$

$

Put in

Domestic

International

International

Domestic

Sentence

Best back pain Chairman

Best budget chair

All cooling grids

Only top leather chairs.

Buy now

Buy now

Buy now

Buy now

The first LI element in each UL is the feature / legend. To make it easier to isolate and set them different from other wrappers, I give those LI elements a CSS class "legend".

CSS:

Now is the interesting part-converting tags into comparison tables. With CSS Flexbox, it is relatively easy to convert UL elements, so they are horizontal in layout, bending, and stretching, so they are more like table cells.

I deleted some unnecessary lines so that you can focus on the following important parts:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

thirty-six

thirty-seven

thirty-eight

thirty-nine

forty

forty-one

forty-two

forty-three

forty-four

forty-five

forty-six

forty-seven

forty-eight

Div.comparisontable {

Display: flex

Bend direction: column; / * convert child ul elements to stacked rows * /

}

Div.comparisontable ul.row {

List-style:none

Display: flex; / * convert children's li elements to flex children * /

Flex:1

Flex-wrap:wrap

}

Div.comparisontable ul.row li {

Background: # c9f4ca

Flex:1

Fill: 10px

Border-bottom:1px solid gray

}

/ * Legend column (first li in each row) * /

Div.comparisontable ul.row li.legend {

Background: # 6640d8

White color

Border:none

Width: 200px

Bottom of border: 1px pure white

}

/ * first line * /

Div.comparisontable ul.row:first-of-type li {

Text-align:center

}

/ * Last line * /

Div.comparisontable ul.row:last-of-type li {

Text-align:center

Border-bottom:none

Box-shadow:0 6px 6px rgba (0pd0re0j0pl 0.23)

}

/ * first and last cells in the legend column * /

Div.comparisontable ul.row:first-of-type li.legend.legend

Div.comparisontable ul.row:last-of-type li.legend {

Background: transparent

Box-shadow:none

}

The feature list or legend column is the first LI element in each row. Its explicit width is 200px, which is different from other flexible width LI elements (flex:1).

Make the comparison table respond

Now, the comparison table is not responding. In other words, even if the screen size becomes very small, the "columns" in each row are side by side.

In the CSS elastic box, we can easily change the display order of flex child elements from the default "side-by-side" behavior to "stack on top of the next" by setting the flex-direction property from "row" to "". Column ".

Now in my comparison table, the UL element itself is stacked, and the child LI element appears side by side like the cells in the table. When the screens become small enough, I change them to stack:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

@ media screen and (max-width:650px) {

Div.comparisontable ul.row {

Bend direction: column

}

Div.comparisontable img {

Width: automatic

Height: automatic

}

Div.comparisontable ul.row li {

Margin-right:0

Width: automatic

Flex:auto

}

/ * first and last cells in the legend column * /

Div.comparisontable ul.row:first-of-type li.legend.legend

Div.comparisontable ul.row:last-of-type li.legend {

Display:none

}

Div.comparisontable ul.row li.legend {

Width: automatic

}

}

Now, when I resize the window down, the comparison table collapses, and each "cell" appears on its own row:

Known problem

Last but not least, there is a small problem with the comparison table. When you resize it, at certain intervals, the widths of some LI become out of sync:

If you know the solution, please send me an email (1394016233@qq.com).

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.