WordPress 网站文章中如何添加table表格?

2022年10月14日 发表评论
免费、便宜/高性价比 服务器汇总(已更新):点击这里了解

WordPress 网站文章中如何添加table表格?

WordPress 网站文章中如何添加table表格?响应式设计的主题在文章中添加表格一直是个难题,以下是两个不完美的实例,供大家参考。

1、例一、表格超出页面宽度部分隐藏,并利用滚动滑块查看隐藏的部分。

2、编辑文章时切换到文本模式,将下代码添加进去:

  1. <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>  

3、把相应的样式添加到主题style.css中

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

4、实例二、使用CSS媒体查询,屏幕小于600px时,将td属性值取出来,放到内容区显示。使用方法与例一相同。

  1. <table>  <thead>    <tr>      <th>支付</th>      <th>日期</th>      <th>金额</th>      <th>周期</th>    </tr>  </thead>  <tbody>    <tr>      <td data-label="支付">支付 #1</td>      <td data-label="日期">02/01/2015</td>      <td data-label="金额">$2,311</td>      <td data-label="周期">01/01/2015 - 01/31/2015</td>    </tr>    <tr>      <td data-label="支付">支付 #2</td>      <td data-label="日期">03/01/2015</td>      <td data-label="金额">$3,211</td>      <td data-label="周期">02/01/2015 - 02/28/2015</td>    </tr>  </tbody></table>  

5、配套样式:

  1. table {    border1px solid #ccc;    width: 80%;    margin: 0;    padding: 0;    border-collapsecollapse;    border-spacing: 0;    margin: 0 auto;}table tr {    border1px solid #ddd;    padding5px;}table th, table td {    padding10px;    text-aligncenter;}table th {    text-transformuppercase;    font-size14px;    letter-spacing1px;}@media screen and (max-width600px) {    table {        border: 0;    }    table thead {        displaynone;    }    table tr {        margin-bottom10px;        displayblock;        border-bottom2px solid #ddd;    }    table td {        displayblock;        text-alignrightright;        font-size13px;        border-bottom1px dotted #ccc;    }    table td:last-child {        border-bottom: 0;    }    table td:before {        contentattr(data-label);        floatleft;        text-transformuppercase;        font-weightbold;    }}  

6、以上方法,只适合比较简单的表格,从Excel中复制过来的到表格代码里包含尺寸样式不能实现自适应。

腾讯云618活动:点击 https://2bcd.com/go/tx/进入最新活动页】领取8888元代金券,附云服务器价格表,2核2G4M轻量应用服务器99元1年,新老用户都可以买,可以享受1次续费99元一年、135元15个月、三年560元,MySQL云数据库59元1年起,2核2G3M配置82元1年,2核4G5M配置188元一年、3年900元,4核8G12M轻量服务器880元15个月,8核16G配置1890元15个月,更多16核32G28M带宽和云服务器CVM标准型S5、GPU服务器、CVM标准型SA2租用优惠价格如下,可以 点此进入最新活动页 查看当前最新的优惠券和活动信息。还可以领下10元无门槛代金券:点此直达

阿里云618活动:点击领取】5亿上云补贴和2088元满减代金券,阿里云服务器租用费用618活动最新价格表【点击了解】,最便宜轻量应用服务器2核2G3M带宽82元1年,ECS云服务器2核2G3M带宽99元一年,ECS u1实例2核4G5M带宽优惠价格199元一年,香港30M带宽轻量服务器24元1个月、288元一年,4核8G服务器706元一年,ECS云服务器4核16G10M带宽30元1个月、90元3个月,云服务器8核32G10M带宽109元1个月、327元3个月。阿里云产品最高降价55%,点击 https://2bcd.com/go/aliyun/ 进入最新活动页了解。

腾讯云续费贵,一次性买3年/5年,免得续费贵。3年轻量 2核2G 4M 560元;3年轻量 2核4G 5M 3年900元,活动入口:点击前往(下拉到“爆品专区”即可看到)。

老用户享新人优惠的方法:用Qq登录、1人可注册3个新账号/用家人朋友的身份注册新号(点击注册新账号)。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: