本文链接：http://www.cnblogs.com/jying/p/6289981.html

table-layout 属性的解释：http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp

1，实现table细边框,设置如下css：

table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;}

2，table表格宽度固定，同时td内容过长也不会被撑开，设置如下css：

table{table-layout:fixed;word-break:break-all;}

3，在上面css设置下，td的width可以设置固定值也可设置百分比，达到某些列宽度固定，某些列按比例自适应的效果。

<html>

<head>

    <style>

        table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;}

    </style>

</head>

<body>

    <table width="50%" style="table-layout:fixed;word-break:break-all;background:#f2f2f2">

        <tr>

            <td width="50">50px</td>

            <td width="50%">50% aaaaaaabbbbbbbccccccc</td>

            <td width="50%">50% aaaaaaabbbbbbbccccccc</td>

            <td width="50">50px</td>

            <td width="100">100px</td>

        </tr>

        <tr>

            <td>50px</td>

            <td>50% aaaaaaabbbbbbbccccccc</td>

            <td>50% aaaaaaabbbbbbbccccccc</td>

            <td>50px</td>

            <td>100px</td>

        </tr>

    </table>

</body>

</html>

效果：

50px 50% aaaaaaabbbbbbbccccccc 50% aaaaaaabbbbbbbccccccc 50px 100px
50px 50% aaaaaaabbbbbbbccccccc 50% aaaaaaabbbbbbbccccccc 50px 100px

原文出自：http://www.hangge.com/blog/cache/detail_435.html

个人小站欢迎来踩：驾校教练评价平台 | 为爱豆砌照片墙

html - table 表格不被撑开，td某些列宽度固定某些列自适应的更多相关文章

  1. html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用

    <!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...

  2. 关于table表格中点击一个按钮获取该行的某一列的值并将其传到模态框的问题解决

    <tbody> {% for item in all_dataset %} <tr> <td>{{ item.nid }}</td> <td> ...

  3. table表格宽度固定，同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

  4. table表格宽带研究（附带：table表格为什么设置td宽度无效）

    情况1:下面代码定义了表格宽带为为600px,未设置td宽带,3个td内容为1,2,3,可以看到3个内容平分table的宽度. 也就是每个td都是200px(请注意:如果用chrome调试宽度,会有一 ...

  5. table表格某一td内容太多导致样式混乱的解决方案

    对于有很多条目的数据,通常采用table元素来快速实现,某一个td的内容太多的话就会导致样式混乱难看. 解决方案 要让table的宽度固定可以给table元素设置table-layout:fixed; ...

  6. 关于html中table表格tr,td的高度和宽度

    关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题.首先,来分析 ...

  7. 原生js封装table表格操作，获取任意行列td，任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  8. 前端获取table表格里面的所有(单个)tr和所有(单个)td，用js实现

    今天在做项目遇到了一个问题,就是获取不到table里面的td. 本来是打算使用jq来解决的,但网上大部分人使用的都是获取到table标签然后点出他的children函数,我的前端页面没有这个函数,然后 ...

  9. table 中 文字长度大于td宽度，导致文字换行 解决方案

    1.TD不换行 nowrap属性 表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不 ...

随机推荐

  1. c#登录时保存账号密码到cookie

    登陆界面有用户名.密码输入框,一个’记住账号密码‘的复选框. 1.登录时,勾选‘记住账号密码‘复选框,则会把用户名密码保存在客户端cookie里,保存时间为最大值(直到用户清除浏览器缓存或者取消勾选’ ...

  2. [译]Java 设计模式之备忘录

    (文章翻译来自Java Design Pattern: Memento) memento是一个保存另外一个对象内部状态拷贝的对象.这样以后就可以将该对象恢复到原先保存的状态. 在将来时空旅行将成为显示 ...

  3. Java Persistence with MyBatis 3(中国版)

    译者的话 前段时间因为工作和学习的须要,我打算深入研究MyBatis框架.于是在网上查找关于MyBatis的教程,发现国内网上关于MyBatis的教程资料少得可怜:除了MyBatis官网上的用户使用手 ...

  4. MSSQL2008数据库备份还原和数据恢复

    原文:MSSQL2008数据库备份还原和数据恢复   序言 一直想写一篇关于数据库备份与恢复的文章,但基于能力的有限对数据库认知的有限怕不足以准确的表达,最后思考很久还是决定把自己的一些理解写出来供大 ...

  5. 阿里云1218动态css3代码

    See the Pen jEWpWm by kujian (@kujian) on CodePen. .room-nav { /* -webkit-animation:roomNavTranslate ...

  6. [Usaco2008 Nov]Guarding the Farm 保卫牧场[DFS]

    Description The farm has many hills upon which Farmer John would like to place guards to ensure the ...

  7. mongo查询某个字段是否存在，并删除记录里的这个字段

    查询course表中,存在lectures_count字段的记录信息 db.course.find( { "lectures.lectures_count": { $exists: ...

  8. GEF-whole-upload教程中遇到的问题及解决方案

    最近在学习GEF开发,使用的是GEF-whole-upload这个教程.由于教程当时所使用的版本与本人使用的版本有一些差异,中间出现了不少问题,现在将解决方案分享给大家. 本人使用的Eclipse版本 ...

  9. ASP.NET Web API 2.0新特性：Attribute Routing1

    ASP.NET Web API 2.0新特性:Attribute Routing[上篇] 对于一个针对ASP.NET Web API的调用请求来说,请求的URL和对应的HTTP方法的组合最终决定了目标 ...

  10. Slide-out Sidebar Menu

    IOS学习之路十(仿人人滑动菜单Slide-out Sidebar Menu) 2013-09-03 22:13 by lixingle, 270 阅读, 0 评论, 收藏, 编辑 最近滑动菜单比较流 ...