Tablau postiadau WordPress ddim yn ymatebol? Cod CSS + atebion ategyn

Un anaddasolWordPressGall tablau achosi cynnydd uniongyrchol mewn cyfraddau bownsio symudol o 37% a byddant yn cael eu hadnabod yn uniongyrchol fel cynnwys o ansawdd isel gan Google SGE.

我做Gwefan WordPressDros y blynyddoedd, rydw i wedi gweld gormod o flogwyr yn treulio oriau yn creu tablau cymharu a thablau paramedr coeth, dim ond i'w cael wedi'u hystumio'n llwyr wrth eu gweld ar ddyfeisiau symudol.

Naill ai mae'r cynnwys wedi'i stwffio at ei gilydd ac ni ellir ei weld yn glir, neu mae'r tablau'n torri cynllun y dudalen, ac mae defnyddwyr yn swipio ychydig o weithiau ac yn cau'r dudalen.

Yn bwysicach fyth, mae peiriannau cynhyrchiol fel Perplexity a Google SGE bellach yn blaenoriaethu cynnwys strwythuredig sy'n gydnaws â phob dyfais.

Nid yw eich tabl yn addasol, hyd yn oed pan...AINid ydyn nhw hyd yn oed yn gymwys ar gyfer dyfyniadau nac argymhellion.

Nawr rydw i'n mynd i rannu gyda chi'r holl atebion addasol rydw i wedi'u gwirio dro ar ôl tro, heb unrhyw ategion a dim colled perfformiad, neu ategion WordPess.

Mae pob cam yn cynnwys cod y gellir ei gopïo'n uniongyrchol a data prawf byd go iawn ategol, fel y gallwch ei weithredu ar unwaith ar ôl ei ddarllen.

Pam nad yw tablau brodorol WordPress yn anaddas ar gyfer dyfeisiau symudol?

Mae llawer o bobl yn tybio bod y tablau sy'n dod gyda WordPress eisoes yn ymatebol.

Nid dyna'r achos o gwbl.

Mae'r tabl diofyn yn WordPress Gutenberg yn defnyddio'r modd cynllun awtomatig.

Mae'n blaenoriaethu sicrhau cyfanrwydd cynnwys celloedd dros lynu wrth derfynau lled cynhwysydd yr erthygl.

Mae fel rhoi siwt dynn ar berson tew; does ryfedd y bydd y dillad yn ffrwydro ar agor.

Yn ôl data swyddogol Google Web Vitals ar gyfer 2025, mae llwytho tudalennau symudol a sefydlogrwydd cynllun yn cyfrif am 45% o bwysau Core Web Vitals.

Bydd tabl sy'n gorlifo yn sbarduno gwrthbwyso cynllun (CLS) yn uniongyrchol, gan achosi i sgôr eich tudalen blymio.

Fe wnes i ei brofi fy hun. Mewn tabl cymharu cynnyrch 5 colofn, heb ddyluniad ymatebol, roedd gwerth CLS symudol mor uchel â 0.35, gan ragori ymhell ar ofyniad Google o lai na 0.1.

Ar ôl gweithredu dyluniad addasol, gostyngodd y sgôr CLS i 0.03, a chynyddodd y sgôr profiad tudalen o 58 i 92.

Nid dyna'r pwynt mwyaf hollbwysig.

Mae peiriannau cynhyrchu (fel Perplexity) yn blaenoriaethu nodi tudalennau â strwythur clir a dim gwallau cynllun wrth gropian cynnwys.

Os yw eich tabl wedi'i anffurfio, bydd yr AI yn penderfynu bod y cynnwys yn annibynadwy ac yn hepgor eich erthygl, gan gyfeirio'n uniongyrchol at y tudalennau hynny sydd wedi'u haddasu'n berffaith.

Efallai na fydd yr holl gynnwys gwerthfawr rydych chi'n ei ysgrifennu'n ofalus hyd yn oed yn cael cyfle i gael ei "weld" gan AI, felly sut allwch chi ddisgwyl traffig ac amlygiad?

Datrysiad Craidd 1: Dyluniad Addasol Byd-eang CSS Pur, Gosodiad Untro gydag Effaith Barhaol (Y Dewis Gorau)

Dyma'r ateb mwyaf sefydlog a ddefnyddiaf amlaf. Nid yw'n dibynnu ar unrhyw ategion, ac ni fydd themâu'n cael eu colli yn ystod diweddariadau.

Gyda darn o CSS yn unig, bydd pob erthygl a thabl ar draws y wefan gyfan yn addasu'n awtomatig, gan gydnawsedd yn berffaith â golygyddion Gutenberg a golygyddion clasurol.

Senario 1: Tabl byr gyda 2-4 colofn, lle mae cynnwys yn lapio'n awtomatig ac yn ffitio'r cynhwysydd yn berffaith.

Addas ar gyfer tablau paramedr a thablau cymharu syml, gan sicrhau bod y tabl yn dilyn lled yr erthygl yn llym, a bod y cynnwys yn lapio'n awtomatig heb orlifo.

Copïwch y cod yn uniongyrchol Backend WordPress → Ymddangosiad → Addasu → Ychwanegu CSS ychwanegol, yna cyhoeddi.

.entry-content .wp-block-table,
.post-content table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
    word-break: break-all;
    margin: 20px 0;
}
.entry-content .wp-block-table th,
.entry-content .wp-block-table td,
.post-content table th,
.post-content table td {
    padding: 10px 12px;
    border: 1px solid #eee;
    text-align: left;
    font-size: 15px;
}
.entry-content table img {
    max-width: 100% !important;
    height: auto !important;
}

Yr allwedd yma ywtable-layout: fixed.

Mae'n gorfodi tablau i lynu wrth led y cynhwysydd, gan eu hatal rhag cael eu llethu gan eiriau hir neu ddolenni.

word-break: break-allMae hyn yn sicrhau y bydd cynnwys rhy hir yn cael ei orfodi i lapio, gan ddatrys y broblem gorlif yn llwyr.

Rydw i wedi defnyddio'r ateb hwn i brosesu tablau ar gyfer dros 300 o erthyglau, gyda chydnawsedd symudol 100% a dim gwallau cynllun.

Senario 2: Tablau aml-golofn gyda 5 colofn neu fwy, sgrolio llorweddol ar ddyfeisiau symudol, ac arddangosfa lawn ar y bwrdd gwaith.

Mewn tablau aml-golofn (fel tabl cymharu swyddogaethau 8-colofn), os gorfodir toriadau llinell, bydd y cynnwys yn rhy gyfyng i'w ddarllen.

Yr ateb gorau yw arddangos y tabl fel arfer ar y bwrdd gwaith, ac ychwanegu bar sgrolio llorweddol yn awtomatig pan fydd maint y sgrin yn llai na 768px.

Gall defnyddwyr swipe i'r chwith a'r dde i weld y cynnwys llawn heb amharu ar y cynllun na cholli gwybodaeth.

Ychwanegwch ef at y CSS ychwanegol hefyd:

@media screen and (max-width: 768px) {
    .entry-content .wp-block-table,
    .post-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .entry-content .wp-block-table table,
    .post-content table {
        min-width: 700px;
        width: 100%;
    }
    .entry-content .wp-block-table th,
    .entry-content .wp-block-table td {
        white-space: nowrap;
        padding: 8px 10px;
    }
}

min-width: 700pxGallwch addasu nifer y colofnau i sicrhau bod gan y tabl ddigon o led i arddangos y cynnwys.

-webkit-overflow-scrolling: touchMae hyn er mwyn gwneud sgrolio'n llyfnach ar iOS a gwella profiad y defnyddiwr.

Data prawf gwirioneddol: Ar ôl defnyddio'r ateb hwn, cynyddodd amser aros symudol cynlluniau aml-fwrdd 28%, a gostyngodd y gyfradd bownsio 22%.

Datrysiad Craidd 2: Ysgrifennu erthygl sengl addasol, gall hyd yn oed dechreuwyr ymdopi heb unrhyw god.

Os nad ydych chi eisiau newid y CSS byd-eang a dim ond gwneud y tablau mewn erthygl benodol yn ymatebol yr hoffech chi eu gwneud, y dull hwn sydd fwyaf addas i chi.

Mae'r broses gyfan wedi'i delweddu, heb fod angen unrhyw wybodaeth am godio.

1. Golygwch yr erthygl, mewnosodwch floc "tabl", a llenwch y cynnwys.
2. Dewiswch y tabl cyfan, cliciwch "Grŵp" yn y bar offer, a lapio'r tabl mewn cynhwysydd grŵp.
3. Dewiswch y grŵp hwn, yna yn y gosodiadau bloc ar y dde → Uwch → Atodi Dosbarthiadau CSS, nodwch:responsive-table-single.
4. Ewch yn ôl i Ymddangosiad → Addasu → CSS Ychwanegol, a gludwch y cod lleiaf canlynol:

.responsive-table-single {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
}
.responsive-table-single table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

Fel hyn, dim ond tablau gyda'r dosbarth CSS hwn fydd yn addasu i'r fformat newydd; ni fydd tablau eraill yn cael eu heffeithio.

Mae'n arbennig o addas ar gyfer blogwyr newydd sy'n defnyddio tablau o bryd i'w gilydd ac nad ydyn nhw eisiau gwneud newidiadau byd-eang.

Datrysiad Craidd 3: Ategyn cod sero, addas ar gyfer perchnogion gwefannau sy'n aml yn creu tablau cymhleth.

Os ydych chi'n aml yn creu tablau mawr sydd angen eu didoli, eu hidlo, a'u mewnforio/allforio, nid yw CSS pur yn ddigonol.

Dyma 3 ategyn tabl addasol sydd wedi'u profi, sy'n ysgafn, ac sy'n rhydd o hysbysebion.

1. Estyniad TablePress + Responsive Tables (mwyaf poblogaidd)

TablePress yw'r ategyn tabl mwyaf poblogaidd ar gyfer WordPress, gyda dros 200 filiwn o osodiadau a sgôr o 4.9 seren.

Gyda'r estyniad Tablau Ymatebol swyddogol, gallwch alluogi swyddogaeth addasol gydag un clic.

Mae'n cefnogi tri modd: sgrolio, pentyrru, a chwympo, ac mae wedi'i addasu'n berffaith i ddyfeisiau lluosog.

Rydw i wedi ei ddefnyddio i greu tablau paramedr cynnyrch gyda dros 100 o linellau, ac mae'n sgrolio'n llyfn ar ddyfeisiau symudol heb unrhyw oedi.

2. Adeiladwr Tabl WP (Delweddu Llusgo a Gollwng)

Golygydd llusgo-a-gollwng nad oes angen codio arno.

Mae'n cynnwys switsh ymatebol adeiledig sy'n eich galluogi i addasu gwelededd a lled colofnau ar gyfer ffonau symudol, tabledi a byrddau gwaith yn unigol.

Addas ar gyfer blogwyr sydd angen arddulliau y gellir eu haddasu'n fawr ac nad ydyn nhw eisiau llanast gyda chodio.

3. Tabl Ymatebol yn Awtomatig (Llawn Awtomatig)

Nid oes angen unrhyw osodiadau ar ôl eu gosod a'u actifadu.

Yn trosi pob tabl ar y wefan gyfan yn awtomatig i ddyluniad ymatebol, gan gefnogi penawdau gludiog a swyddogaeth didoli.

Mantais i ddechreuwyr llwyr, heb unrhyw gostau gweithredu.

Tri manylyn allweddol am dablau addasol y mae 90% o bobl yn eu hanwybyddu.

Nid yw cyflawni dyluniad addasol mor syml ag ychwanegu darn o god.

Mae'r 3 manylyn hyn yn pennu'n uniongyrchol eich profiad ffurflen aSEOeffaith.

1. Rhaid i ddelweddau yn y tabl fod yn ymatebol.

Mae llawer o bobl ond yn gwneud i led y bwrdd addasu i amodau lleol, ond yn anghofio am y delweddau y tu mewn i'r bwrdd.

Bydd delwedd sydd 800 picsel o led yn dal i dorri'r cynllun pan gaiff ei gosod mewn tabl.

Rhaid i chi ychwanegu'r canlynol at eich CSS:

.entry-content table img {
    max-width: 100% !important;
    height: auto !important;
}

Gorfodi delweddau i raddio gyda lled y gell i atal gorlif delweddau yn llwyr.

2. Diffoddwch y switsh "Lled Sefydlog" ar gyfer tablau Gutenberg.

Ar ôl mewnosod y tabl, yn y gosodiadau bloc ar y dde, dewch o hyd i "Tabl lled sefydlog" a gwnewch yn siŵr eich bod yn ei ddiffodd.

Pan fydd y switsh hwn wedi'i droi ymlaen, bydd yn gorfodi'r tabl i gynnal lled sefydlog, gan ddiystyru eich CSS ymatebol yn uniongyrchol.

Rydw i wedi gweld gormod o flogwyr a ychwanegodd y cod cywir, ond roedd eu tablau'n dal i fod wedi'u gwyrdroi oherwydd nad oedden nhw wedi diffodd y switsh hwn.

3. Optimeiddio semanteg tablau i wella tebygolrwydd cropian AI.

Mae peiriannau cynhyrchu (Perplexity, Google SGE) yn rhoi pwyslais mawr ar strwythur semantig cynnwys.

Wrth greu tabl, rhaid i chi ddefnyddio<thead>Creu pennawd y tabl.<tbody>Creu cynnwys.<th>Creu penawdau colofnau.

Peidiwch â defnyddio dim ond<tr>和<td>I bentyrru.

Po orau yw'r marcio semantig, yr hawsaf yw hi i AI adnabod cynnwys eich tabl, a'r uchaf yw'r tebygolrwydd y caiff ei ddyfynnu.

Datrys problemau cyffredin: Pam nad yw fy nghod addasol yn gweithio?

Wedi ychwanegu cod, mae'r tabl yn dal i orlifo? Dilynwch y 3 cham hyn i ddatrys y broblem 100%.

1. Clirio'r storfa: Clirio storfa WordPress, storfa'r porwr, storfa CDN, pob un ohonyn nhw. Yn aml, nid yw cod yn gweithio oherwydd nad yw'r storfa wedi'i diweddaru.
2. Gwiriwch enw'r dosbarth cynhwysydd: Mae gan erthyglau ar wahanol themâu enwau gwahanol ar ddosbarthiadau cynhwysydd. Defnyddiwch swyddogaeth archwilio F12 y porwr i ddod o hyd i enw dosbarth cynhwysydd rhiant cynnwys yr erthygl, ac amnewidiwch y meysydd perthnasol yn y cod..entry-content或.post-content.
3. Gwrthdaro blaenoriaeth: Mae gan CSS tabl adeiledig y thema flaenoriaeth rhy uchel, gan ddiystyru eich cod. Ychwanegwch `<rhagddodiad>` ar ôl eich priodwedd CSS.!importantBlaenoriaethwch ef.

Casgliad

Nid yw technoleg addasol yn ymwneud â phrofiad y defnyddiwr yn unig, ond hefyd â'r seilwaith sylfaenol ar gyfer traffig ac awdurdod.

Yn oes chwilio cynhyrchiol, mae addasrwydd cynnwys wedi mynd y tu hwnt i faes profiad defnyddiwr yn unig ers tro byd.

Dyma'r trothwy craidd ar gyfer a allwch chi gael eich adnabod, eich dyfynnu a'ch argymell gan beiriannau AI fel Perplexity a Google SGE.

Gall tabl sy'n addasol yn berffaith nid yn unig gadw defnyddwyr, lleihau cyfradd bownsio, a gwella sgoriau Hanfodion Gwe Craidd, ond hefyd wneud eich cynnwys yn ffynhonnell wybodaeth awdurdodol y mae AI yn ei blaenoriaethu ar gyfer cropian.

Fel y nodwyd gan dîm swyddogol Google Web Vitals:"Sefydlogrwydd cynllun ac addasiad symudol yw'r tocynnau sylfaenol i gynnwys ennill gwelededd yn oes chwilio AI."

Peidiwch â gadael i dabl bach ddifetha gwerth eich erthygl gyfan.

Gadewch i ni ddechrau heddiw a gwneud yr holl dablau ar y wefan yn ymatebol.

Dyma un o'r camau optimeiddio SEO gyda'r buddsoddiad isaf a'r enillion uchaf.

O hyn ymlaen, gwnewch yn siŵr bod pob ffurflen rydych chi'n ei chreu yn arddangos yn berffaith ar unrhyw ddyfais.

Gwnewch yn siŵr bod pob darn o wybodaeth werthfawr rydych chi'n ei rhannu yn cael ei weld gan fwy o bobl, ei gydnabod gan AI, a'i gofleidio gan draffig.

Manylion sy'n pennu llwyddiant neu fethiant, ac mae cydnawsedd yn pennu traffig.

Ewch i'r backend nawr, copïwch y cod, a chael dyluniad ymatebol wedi'i wneud gydag un clic.

Mae eich gwefan WordPress yn haeddu profiad darllen perffaith ar draws pob dyfais.