Last update at ：2024-04-06，Edit by888u
The tables that come with WordPress cannot adapt to the screen bandwidth. Every time I create a new table, it displays normally on the computer, but when I switch it to the mobile phone, it exceeds the screen width. It is very troublesome, and more importantly, it is not beautiful. This time I would like to bring you a tutorial on adding an adaptive table.
Case analysis
We can see that the code for defining table attributes in the code is (emphasis added):
Analysis of the above code: border—the line width of the table is 1; cellspacing—the distance between the data in the table and the table is 0; cellpadding—the distance between cells is 2, so that the table can be adapted, but there is a The text in the question will wrap automatically, causing the height to change, which is not very nice. So I also brought a method
Adaptive table code:
Another way is to add adaptive text to the text, but the above code is not applicable. If you want to achieve adaptive text and tables, you can use the following code:
System adaptive form
Adaptive table
Enter text
Adaptive table
Enter text
Adaptive table
Enter text
Adaptive table
Enter text
The above is the code for the adaptive table. If you want to add more rows and columns, just copy a few rows yourself. It is very troublesome every time I edit an article. I need to find and enter the fonts one by one. The overall feeling is not very intuitive. But this is still very practical for now. There is also a two-column adaptive table in the above example code. If you need a multi-column adaptive table, you need to modify the "50%" in the code to three columns of "33.33%" or the four columns to "25%." "wait. Just follow this example.
Table font centering code:
After the above table is created, the fonts inside will not be centered. If you want to center-align the fonts in the table, you need to add the following styles to the style sheet of the WordPress theme to achieve a centered effect.
1
2
3
.table-r td{
text-align: center;
}
Recommended site searches: Telecom IP agent, Guangdong website registration, me domain name, independent IP virtual host, website server rental, Qingdao IP agent, domain name query network, domain name registration number query, web page registration, php virtual space,
All copyrights belong to 888u unless special state
发表评论