Home  >  Article  >  WeChat Applet  >  How to draw a table with a small program

How to draw a table with a small program

coldplay.xixi
coldplay.xixiOriginal
2020-08-13 14:31:1111708browse

How to draw a table in a mini program: first create a corresponding interface in the mini program development tool and insert multiple view elements; then add class attributes and view styles, and save the code; then set the table header and The style of the table body; finally save the code and preview the effect in the simulator.

How to draw a table with a small program

How to draw a table with a mini program:

1. In the first step, double-click to open the WeChat mini program development tool , create a corresponding interface, then insert multiple view elements and add class attributes, as shown in the following figure:

How to draw a table with a small program

2. In the second step, these view styles are not given. , then save the code and preview the effect. The results appear arranged from top to bottom, as shown in the following figure:

How to draw a table with a small program

3. The third step, in the corresponding wxss file, set The style of the header and body of the table is as shown in the figure below:

How to draw a table with a small program

4. Step 4. Save the code again and preview the effect in the simulator. It is found that a Table, as shown in the figure below:

How to draw a table with a small program

5. Step 5, add a border-bottom attribute in th td and set the bottom border attribute, as shown in the figure below:

How to draw a table with a small program

6. Step 6. It turns out that the bottom border of the last row is a bit thick. This is because the borders of table and td are set and thickened, as shown in the following figure:

How to draw a table with a small program

Related learning recommendations: WeChat Mini Program Development Tutorial

The above is the detailed content of How to draw a table with a small program. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]