防止table变形 td固定宽度

具体设置如下代码：

 <!doctype html>

 <html lang="en">

     <head>

         <meta charset="UTF-8" />

         <title>防止table变形 td固定宽度</title>

         <style type="text/css">

             table {

                 /*为表格设置合并边框模型*/

                 border-collapse: collapse;

                 /*列宽由表格宽度和列宽度设定*/

                 table-layout: fixed;

             }

             td {

                 border: 1px solid #ddd;

                 /*允许在单词内换行。*/

                 word-break: break-word;

                 /*设置宽度*/

                 width: 100px;

             }

         </style>

     </head>

     <body>

         <table>

             <tr>

                 <td>DataDataDataDataDataDataDataDataDataDataDataData123</td>

                 <td>Data</td>

                 <td>Data</td>

                 <td>Data</td>

             </tr>

             <tr>

                 <td>Data</td>

                 <td>Data</td>

                 <td>Data</td>

                 <td>Data</td>

             </tr>

         </table>

     </body>

 </html>

table布局 防止table变形 td固定宽度的更多相关文章

  1. ExtJS 布局-Table布局（Table layout）

    更新记录: 2022年6月1日 开始. 2022年6月10日 发布. 1.说明 table布局类似表格,通过指定行列数实现布局. 2.设置布局方法 在父容器中指定 layout: 'table' la ...

  2. html页面布局之table布局：

    table布局: table来做整体页面的布局,布局技巧归纳如下: (1)按照设计图的尺寸设置表格的宽高以及单元格的宽高 (2)将表格的border.cellpadding.cellspacing全部 ...

  3. 浅谈ul布局以及table布局

    我个人对于某些言论说要注重html语义化在布局中的应用,我反而不怎么感冒,试试兼容IE7&&项目期相对较赶的情况下,我还是推荐快速开发为主,兼容性强为主. 如果布局中需要用户边框,推荐 ...

  4. PS切图导出代码后出现的图片布局散乱的解决方法——table布局

    前言: 一般来说,大部分美工PS切图后导出的都是使用PS默认的table布局的页面,出现最多的异常是上传代码,替换图片后,发现图片布局散乱,完全不是想要的效果.轻微的是浏览器不兼容,只有部分浏览器可以 ...

  5. table布局， td内部元素溢出边界问题。 （已解决）

    今天,我尝试用table布局有多个输入需要提交的页面, 为了使输入元素占满td,我对其宽度设置为100%, 结果text输入元素溢出td, 具体情况如下: 解决办法是对td样式设置为overflow: ...

  6. table 设置自动宽度后 td 的固定宽度 在 谷歌浏览器自动拉伸

    table   设置自动宽度后   td 的固定宽度  在 谷歌浏览器自动拉伸 解决方案 <table style="table-layout:fixed;">

  7. css Table布局：基于display:table的CSS布局

    两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...

  8. 日历控件table布局

    作为初学者,一开始就接触div+css ,所以说实话,我并不怎么喜欢table布局,一般逃避. 先上这次的效果图: 看到这个图,第一次用table布局没实现,原因是给tr加下边框失效.当时没找到原因, ...

  9. css table 布局

    使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题.例如,“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一 ...

随机推荐

  1. 力特ZE398C驱动光盘-USB转RS232-支持Windows 10/Mac

    这个工具是USB1.1的,相对来说比较老,一开始做小白鼠不知道买了USB1.1的,所以我不建议买这个,还有其它的型号,支持USB2.0和USB3.0,不过价格也相对来说比较贵,这个才30块钱左右. 关 ...

  2. CentOS 6.9配置EPEL源

    简介: EPEL是一个由特别兴趣小组创建.维护并管理的,针对 红帽企业版 Linux(RHEL)及其衍生发行版(比如 CentOS.Scientific Linux.Oracle Enterprise ...

  3. mysql学习之二：mysql基本使用方法

    安装完mysql后我们能够进行sql语句的操作: 我们能够使用下面命令连接到MySQL服务: mysql -h localhost -u root -p -h參数指定要连接的MySQLserver地址 ...

  4. Myeclipse设置快捷键

    快捷键中把我们习惯性使用的Alt+/进行代码自动补齐的快捷键改为了ctrl+空格,大家知道这是切换中英文输入法的键,所以需要更改这个快捷键, 1.选择MyEclipse6.0菜单栏中的Window-& ...

  5. eclipse3.4配置的tomcat server如何部署以前的web项目?

    1. 打开.project文件,在<natures>元素中加入 <nature>org.eclipse.wst.common.project.facet.core.nature ...

  6. opencv cuda TK1 TX1 兼容设置

    cmake设置 CUDA_ARCH_BIN 3.2 5.2 CUDA_ARCH_PTX 3.2 5.2 否则报一下错误: OpenCV Error: Gpu API call (NCV Asserti ...

  7. E470 外放没声音问题解决

    到官网下载声卡驱动.和热键驱动,安装就ok了

  8. 深入分析JavaWeb Item7 -- HttpServletResponse详解

    Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.request和response对象即然代表请求和响应,那我们要 ...

  9. 3D屏保:排色榜

    3D屏保:排色榜 排色榜,是一个针对图形学中的色彩进行排序的DEMO,这里的色是色彩的意思,看成别的点进来的同学请自觉面壁.该DEMO可以按RGB,GBR,BRG,灰度值四种方式进行排序.排序算法为冒 ...

  10. atoi()，atof等函数的实现

    atoi()函数的功能:将字符串转换成整型数:atoi()会扫描参数nptr字符串,跳过前面的空格字符,直到遇上数字或正负号才开始做转换,而再遇到非数字或字符串时('\0')才结束转化,并将结果返回( ...