本文链接：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. SQL点滴26—常见T-SQL面试解析

    原文:SQL点滴26-常见T-SQL面试解析 它山之石可以攻玉,这一篇是读别人的博客后写下的,不是原原本本的转载,加入了自己的分析过程和演练.sql语句可以解决很多的复杂业务,避免过多的项目代码,下面 ...

  2. CI框架 .htaccess 隐藏url在index.php解决方案

    CodeIgniter(下面简称"CI")是一款国外优秀的PHP轻量级MVC框架,它支持PHP4和PHP5.是开发中小型可拓展性需求高的Web应用程序的利器.眼下你所见到的这个博客 ...

  3. leetcode 第43题 Wildcard Matching

    题目:(这题好难.题目意思类似于第十题,只是这里的*就是可以匹配任意长度串,也就是第十题的‘.*’)'?' Matches any single character. '*' Matches any ...

  4. leetcode第30题--Next Permutation

    problem: Implement next permutation, which rearranges numbers into the lexicographically next greate ...

  5. Binder机制，从Java到C （7. Native Service）

    1.什么是NativeService Native Service,是通过C或C++代码写出來,提供给Java进行远程调用的RemoteService.向Android开机就启动的surfacefli ...

  6. 【IOS开发】如何画1像素的线

    最近在项目中画了一根1像素的线,我是通过直接花一个但是通过PS查看,画了不止1个像素. 原代码语句: label1 = [[UILabel alloc] initWithFrame:CGRectMak ...

  7. Mac OS X安装之虚拟机环境下的总结

    最近一直忙着公司iOS Touch的新版发布,终于忙过了.现在,又开始了新的阶段,不过算是轻松了很多.回来一看,自己的博客空空如也,实在受不了了.于是,开始更一下吧,哈哈. 这个文档是我几个月前,开始 ...

  8. noip推荐系列：遥控车[字符串+高精+二分答案]

    [问题描述] 平平带着韵韵来到了游乐园,看到了n辆漂亮的遥控车,每辆车上都有一个唯一的名字name[i].韵韵早就迫不及待地想玩名字是s的遥控车.可是韵韵毕竟还小,她想象的名字可能是一辆车名字的前缀( ...

  9. 运动检测（前景检测）之（二）混合高斯模型GMM

    运动检测(前景检测)之(二)混合高斯模型GMM zouxy09@qq.com http://blog.csdn.net/zouxy09 因为监控发展的需求,目前前景检测的研究还是很多的,也出现了很多新 ...

  10. AHOI1997彩旗飘飘 VIJOS1097合并果子（noip2007)

    AHOI彩旗飘飘 这是一题类似于排列组合的题目吧...递推状态 数组f[100][100][100][2];表示红旗数目,黄旗数目,颜色改变的次数,末尾的旗的颜色(0为黄,1为红) 之后就是如何写递推 ...