Add a table table to the article

19:02:39, August 16, 2016 WordPress twenty-one 5.4K Reading mode

Adding tables to the theme of responsive design has always been a problem. Here are two imperfect examples for your reference:

Example 1 The part of the table that exceeds the page width is hidden, and use the scroll slider to view the hidden part

When editing an article, switch to text mode and add the following code:

< div class = "table-container" >
< table >
< tbody > < tr >
< th > Header 1 </ th >
< th > Header 2 </ th >
< th > Header 3 </ th >
< th > Header 4 </ th >
< th > Header 5 </ th >
< th > Header 6 </ th >
< th > Header 7 </ th >
< th > Header 8 </ th >
</ tr >
< tr >
< td > row1_cell1 </ td >
< td > row1_cell2 </ td >
< td > row1_cell3 </ td >
< td > row1_cell4 </ td >
< td > row1_cell5 </ td >
< td > row1_cell6 </ td >
< td > row1_cell7 </ td >
< td > row1_cell8 </ td >
</ tr >
< tr >
< td > row2_cell1 </ td >
< td > row2_cell2 </ td >
< td > row2_cell3 </ td >
< td > row2_cell4 </ td >
< td > row2_cell5 </ td >
< td > row2_cell6 </ td >
< td > row2_cell7 </ td >
< td > row2_cell8 </ td >
</ tr >
< tr >
< td > row3_cell1 </ td >
< td > row3_cell2 </ td >
< td > row3_cell3 </ td >
< td > row3_cell4 </ td >
< td > row3_cell5 </ td >
< td > row3_cell6 </ td >
< td > row3_cell7 </ td >
< td > row3_cell8 </ td >
</ tr >
</ tbody > </ table >
</ div >

Add the corresponding style to the theme style.css

table {
margin : 0;
border-collapse : collapse ;
}
td, th {
padding : .5em 1em;
border : 1px solid #999 ;
}
.table-container {
width : 100%;
overflow -y: auto ;
_overflow: auto ;
margin : 0 0 1em;
}
.table-container::-webkit-scrollbar {
-webkit-appearance: none ;
width : 14px ;
height : 14px ;
}
.table-container::-webkit-scrollbar-thumb {
border -radius: 8px ;
border : 3px solid #fff ;
background-color : rgba(0, 0, 0, .3);
}

Source code from: http://caibaojian.com/simple-responsive-table.html

Example 2 . Use CSS media to query. When the screen is less than 600px, take out the td attribute value and display it in the content area.

Use the same method as in Example 1.

< table >
< thead >
< tr >
< th > payment </ th >
< th > date </ th >
< th > amount of money </ th >
< th > cycle </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td data-label = "Payment" > Payment # 1 </ td >
< td data-label = Date > 02/01/2015 </ td >
< td data-label = Amount > $2,311 </ td >
< td data-label = Period > 01/01/2015 - 01/31/2015 </ td >
</ tr >
< tr >
< td data-label = "Payment" > Pay # 2 </ td >
< td data-label = Date > 03/01/2015 </ td >
< td data-label = Amount > $3,211 </ td >
< td data-label = Period > 02/01/2015 - 02/28/2015 </ td >
</ tr >
</ tbody >
</ table >

Matching style:

table {
border: 1px solid #ccc;
width: 80%;
margin: 0;
padding: 0;
border-collapse: collapse;
border-spacing: 0;
margin: 0 auto;
}
table tr {
border: 1px solid #ddd;
padding: 5px;
}
table th, table td {
padding: 10px;
text-align: center;
}
table th {
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}

Source code from: http://www.webhek.com/responsive-tables-in-pure-c ss

The above methods are only suitable for relatively simple tables. Copying from Excel to include dimension styles in table codes cannot be adaptive.

Most of the articles on this site are original and used for personal learning records, which may be helpful to you, for reference only!

My Wechat

Copyright Notice

Please indicate the source and link of the original article reprinted on this site. Thank you for your cooperation!

Get this topic

five hundred and ninety-eight million eight hundred and forty-five thousand and six

Please add Q: 598845006

Multi functional theme Begin

This article is written by Robin Published on August 16, 2016 at 19:02:39
Please specify: https://zmingcx.com/add-the-table-form.html |Robin

WordPress
WordPress Theme
common problem

five hundred and ninety-eight million eight hundred and forty-five thousand and six

Please add Q: 598845006

Multi functional theme Begin

Comments twenty-one Visitors twenty-one

Online earning blog one
August 17, 2016 07:00:35 Hangzhou, Zhejiang Province one F
reply
Thanks for sharing
I love sports bike network seven
11:11:17, August 17, 2016 Hangzhou, Zhejiang Province two F
reply
Learned, How to add a form to the article? I have never been able to do so. I am very depressed about it!
- I love sports bike network seven
  10:29:14, September 20, 2016 Guilin, Guangxi B one
  reply
  @ I love sports bike network I have always wanted to create a combination of "recently published+popular articles+category directory+tag cloud" for my blog in the right column, but it is impossible for technology to do so. Can bloggers share when and how the sidebar implements tab technology? thank you!
Koolight four
11:34:17, August 17, 2016 Hangzhou, Zhejiang Province three F
reply
So far, it seems that no tables have been added to the article.
- I love sports bike network seven
  16:19:14, August 18, 2016 Hangzhou, Zhejiang Province B one
  reply
  @ Koolight Like you, there are no forms that have not been used up to now!
Boke112 navigation five
14:49:07, August 17, 2016 Hangzhou, Zhejiang Province four F
reply
It seems that there are some tools that can be converted into adaptive tables, but this one is seldom used. It's OK to do some manual work
Summer Blog three
17:05:38, August 17, 2016 Hangzhou, Zhejiang Province five F
reply
I edit the table directly in dw, and then copy it to the wp editor.
- Share it three
  August 27, 2016 09:59:46 Hangzhou, Zhejiang Province B one
  reply
  @ Summer Blog I do the same thing. Every article on my website is in tabular form
Ink, water bottle four
10:25:53, August 18, 2016 Hangzhou, Zhejiang Province six F
reply
Not bad, like one
BootStrap Table can also be adaptive
aunsen five
15:39:18, August 18, 2016 Hangzhou, Zhejiang Province seven F
reply
Brother Bird, it rains in time
namesilo zero
15:06:57, August 19, 2016 Hangzhou, Zhejiang Province eight F
reply
Universal wp. It would be better if you could edit the statistical chart directly.
Pseudo geek four
21:57:05, August 19, 2016 Hangzhou, Zhejiang Province nine F
reply
Uncle Bird's theme is very fast
Handsome little Qiqi five
August 20, 2016 17:02:49 Hangzhou, Zhejiang Province ten F
reply
In fact, it is more appropriate to write this as a short code
Yang Zeye two
19:56:44, August 21, 2016 Hangzhou, Zhejiang Province eleven F
reply
I found a serious problem with this blog theme. It's just that what I bought is not the official genuine (mainly because I can't bear to pay so much). Anyone who is online can test it with me. I think there are also official genuine 299
Meteor Shower Blog zero
17:48:49, August 24, 2016 Hangzhou, Zhejiang Province twelve F
reply
Leave a message! two hundred and thirty-three
Laogao Crown Club zero
August 31, 2016 16:22:24 Hangzhou, Zhejiang Province thirteen F
reply
Will too many forms in the website affect the collection of the website
Idle fish one
September 4, 2016 13:24:17 Hangzhou, Zhejiang Province fourteen F
reply
You can simply use the online editor to make a table, and then copy it into the text editor
Pseudo geek four
17:34:56, September 5, 2016 Hangzhou, Zhejiang Province fifteen F
reply
Learning mark
Picking Notes one
11:34:28, September 7, 2016 Hangzhou, Zhejiang Province sixteen F
reply
Haha, in fact, you can use Baidu's "html online editor" to generate tables with the table tools inside, which should be adaptive.
I use this: http://zaixianwangyebianji.51240.com/
effect: https://www.needsth.wang/ougishi.html
Fanbaohui Blog zero
September 30, 2016 17:04:55 Panyu District, Guangzhou City, Guangdong Province seventeen F
reply
This is easy to use
Chemical plant smoke exhaust system one
October 9, 2017 16:49:21 Suzhou, Jiangsu Province eighteen F
reply
Thanks for sharing~