天天看點

antd option寬度自适應_WordPress文章中添加自适應寬度的表格——墨澀網

antd option寬度自适應_WordPress文章中添加自适應寬度的表格——墨澀網

WordPress文章中添加自适應表格,前面寫文章的時候需要用到表格來表達陣列資訊,但是在WordPress添加表格不想是在office中那樣友善,需要借助插件或者代碼才可以實作,今天分享一個不需要安裝插件純代碼實作WordPress文章中添加自适應表格的方法,表格可以實作文字字型居中色彩屬性、自定義行數列數、插入圖檔等操作。

教程開始

WordPress編輯文章切換到文本編輯模式,将下面代碼添加進去,并修改其中的文字:

自适應表格

自适應表格 輸入文字 自适應表格 輸入文字

效果如下:

antd option寬度自适應_WordPress文章中添加自适應寬度的表格——墨澀網

一:如果想添加更多行。

多複制幾個

...這樣的代碼組合即可。

自适應表格

自适應表格 輸入文字 自适應表格 輸入文字 自适應表格 輸入文字 自适應表格 輸入文字

效果如下:

antd option寬度自适應_WordPress文章中添加自适應寬度的表格——墨澀網

二:如果想對添加更多列。

上面是兩欄自适應表格,如果需要多欄自适應表格,可以将代碼中的“50%”修改成需要的數字。3欄修改成“33.33%”,四欄修改成“25%”等,以此類推即可,也可以設定不同的列寬度。

自适應表格

序号 自适應表格 輸入文字 備注 序号 自适應表格 輸入文字 備注

效果如下:

antd option寬度自适應_WordPress文章中添加自适應寬度的表格——墨澀網

三:如果想修改文字字型、居中、色彩等資訊。

可以在Wordpress的可視化編輯器中選擇中需要修改的文字,直接在上方的文字屬性欄設定即可。

antd option寬度自适應_WordPress文章中添加自适應寬度的表格——墨澀網

效果如下:

antd option寬度自适應_WordPress文章中添加自适應寬度的表格——墨澀網

四:如果想在表格中添加圖檔

可以在Wordpress的可視化編輯器中直接将光标插入需要插入圖檔的表格中,添加媒體圖檔即可。

antd option寬度自适應_WordPress文章中添加自适應寬度的表格——墨澀網

效果如下:

antd option寬度自适應_WordPress文章中添加自适應寬度的表格——墨澀網

總體效果預覽

antd option寬度自适應_WordPress文章中添加自适應寬度的表格——墨澀網

繼續閱讀