怎么设置table(表格)手机端自适应宽度
我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验。这里就这个问题分享一下解决的方法。
以下面这个表格为例:
表格范例-周杰伦jay专辑《范特西》专辑曲目
正确的(自适应宽度)代码如下:
<div>周杰伦jay专辑《范特西》专辑曲目</div> <table style="table-layout: fixed;" border="" width="100%" cellspacing="" cellpadding=""> <tbody> <tr> <th style="text-align: left;">序号</th> <th style="text-align: left;">曲名</th> <th style="text-align: left;">作词</th> <th style="text-align: left;">作曲</th> <th style="text-align: left;">编曲</th> </tr> <tr> …… </tr> </tbody> </table>
可以看到上面代码中关于定义table(表格)属性的代码是:
<table style="table-layout: fixed;" border="" width="100%" cellspacing="" cellpadding="">
经常见到的非自适应宽度的代码,也就是在移动端会撑破列宽的代码则是:
<table style="height: 125px;" border="" width="" cellspacing="" cellpadding="">
看出来区别没有,关于style和width的设置不一样!
总结:在定义表格时,width(整个表格的宽度)不要设置为固定数值,定义为百分比类型,例如90%或者95%;再追加style="table-layout:fixed;",这样做可以使半角连续字符强制换行,不至于撑破列宽。需要注意的是,使用此参数后,不要轻易在tr(行)或td(列)中加入height属性,会使table不再被内容撑出适合的高度。做到这两点之后,你table(表格)在任何情况下都可以很好的自适应宽度显示了。
补充一下,上面定义table(表格)参数的意思,border:表格的线宽为1;cellspacing:表格内数据与表格间隔为0;cellpadding:单元格与单元格间隔为2。
怎么设置table(表格)手机端自适应宽度的更多相关文章
- 前端切图:手机端自适应布局demo
手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...
- 织梦M手机端/自适应网站内容图片变形解决办法
我们在做响应式网站或者织梦M功能手机站的时候,会发现如果内容页图片太大,在移动端显示会变形,dede手机端图片过长等问题,手机端文章内容页图片不能自适应!这给通过手机端浏览网站的用户造成了很不好的用户 ...
- 设置table表格的单元格间距两种方式
table表格里设置单元格td之间的间距,通常用cellspacing设置单元格间距,有时候该属性可能无效,或需要用其他方式时,可用其他方式实现,例如在背景是白色背景的时候,设置单元格td的borde ...
- Thinkphp设置PC和手机端模板
<?php // 判断手机端 function ismobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X ...
- CSS 设置TABLE 表格 边框
/*table列表 合并边框设置*/ .tablelist { border-collapse:collapse; } /*table列表 设置边框宽度及颜色*/ .tablelist td { bo ...
- css设置table表格tr分离
table { border-collapse:separate; border-spacing:10px 50px; }
- 编写手机端自适应页面案例,springMVC代码,SpringMVC上传代码,去掉input框中原有的样式,使ios按钮没有圆角,css中的border-radius类似
1.编写的页面 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- 手机端自适应布局demo
原型如下: 要求如下:适应各种机型 源码如下: <!DOCTYPE html > <html> <head> <meta http-e ...
- 设置table的每竖的宽度
随机推荐
- MySQL——用户与密码
mysql安装完成之后,在/var/log/mysqld.log文件中给root生成了一个默认密码.通过下面的方式找到root默认密码,然后登录mysql进行修改: grep 'temporary p ...
- MySQL备份恢复之mysqldump
Preface The day before yesterday,there's a motif about the lock procedure when backing up My ...
- react初学
react和vue一样都是mvvm的这种开发模式. 下载js文件 引入HTML文件里 <!DOCTYPE html> <html> <head> <scrip ...
- ruby 比较符号==, ===, eql?, equal?
“==” 最常见的相等性判断 “==” 使用最频繁,它通常用于对象的值相等性(语义相等)判断,在 Object 的方法定义中,“==” 比较两个对象的 object_id 是否一致,通常子类都会重写覆 ...
- STM32进阶之串口环形缓冲区实现(转载)
转载自微信公众号“玩转单片机”,感谢原作者“杰杰”. 队列的概念 在此之前,我们来回顾一下队列的基本概念:队列 (Queue):是一种先进先出(First In First Out ,简称 FIFO) ...
- 笨方法学python之import sys与from sys import argv的区别
这是在网上看到的一个大神的解答: sys is a module that contains “system functionality”. sys.argv is a list containing ...
- (数据科学学习手札35)tensorflow初体验
一.简介 TensorFlow时谷歌于2015年11月宣布在Github上开源的第二代分布式机器学习系统,目前仍处于快速开发迭代中,有大量的新功能新特性在陆续研发中: TensorFlow既是一个实现 ...
- (数据科学学习手札29)KNN分类的原理详解&Python与R实现
一.简介 KNN(k-nearst neighbors,KNN)作为机器学习算法中的一种非常基本的算法,也正是因为其原理简单,被广泛应用于电影/音乐推荐等方面,即有些时候我们很难去建立确切的模型来描述 ...
- LeetCode:24. Swap Nodes in Pairs(Medium)
1. 原题链接 https://leetcode.com/problems/swap-nodes-in-pairs/description/ 2. 题目要求 给定一个链表,交换相邻的两个结点.已经交换 ...
- VINS紧耦合优化公式及代码解析
1.首先确定待优化的状态变量 对应代码,优化参数为: Vector3d Ps[(WINDOW_SIZE + )];(平移向量) Vector3d Vs[(WINDOW_SIZE + )];(速度) M ...