本文链接：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. VS2015 ASP.NET5 Web项目

    VS2015 ASP.NET5 Web项目结构浅析   前言 本文个人同步博客地址http://aehyok.com/Blog/Detail/76.html 在安装好VS2015之后,一直想看看新版本 ...

  2. Java 集合之LinkedList源码分析

    1.介绍 链表是数据结构中一种很重要的数据结构,一个链表含有一个或者多个节点,每个节点处理保存自己的信息之外还需要保存上一个节点以及下一个节点的指针信息.通过链表的表头就可以访问整个链表的信息.Jav ...

  3. ASP.NET MVC Model绑定

    ASP.NET MVC Model绑定(一) 前言 ModelMetadata系列的结束了,从本篇开始就进入Model绑定部分了,这个系列阅读过后你会对Model绑定有个比较清楚的了解, 本篇对于Mo ...

  4. [转]理解C# 4 dynamic(1) - var, object, dynamic的区别以及dynamic的使用

    阅读目录: 一. 为什么是它们三个 二. 能够任意赋值的原因 三. dynamic的用法 四. 使用dynamic的注意事项 一. 为什么是它们三个? 拿这三者比较的原因是它们在使用的时候非常相似.你 ...

  5. CSS绘制无图片的气泡对话框

    <div class="qipao_contianer">            <div class="qipao_content yj3" ...

  6. mac下Android apk 破解流程

    相关工具下载:http://pan.baidu.com/s/1kTkOicn 首先你要有eclipse工具,在sdk目录下有如下工具可以使用 android:adb shell:进入交互shell  ...

  7. 【转】iOS 开发者必不可少的 75 个工具

    原文地址:Ben  译文地址:伯乐在线 如果你去到一位熟练的木匠的工作室,你总是能发现他/她有一堆工具来完成不同的任务. 软件开发同样如此.你可以从软件开发者如何使用工具中看出他水准如何.有经验的开发 ...

  8. DedeCms密码解密[转]

    dede 的密码怎么破解,dede后台.32位的DEDE密码如何破解 dede 的密码是32位MD5减去头5位,减去尾七位,得到20 MD5密码,方法是,前减3后减1,得到16位MD5. 比如我的数据 ...

  9. OpenStack调研

    OpenStack调研:OpenStack是什么.版本演变.组件关系(Havana).同类产品及个人感想 一点调研资料,比较浅,只是觉得部分内容比较有用,记在这里: 首先,关于云计算,要理解什么是SA ...

  10. seajs代码

    打包并压缩seajs代码 背景 seajs是一款优秀的模块开发插件,但是当我们使用它来进行模块化开发的时候,由于它的每个模块的加载都会进行一次http请求,那么当模块数量倍增的时候,会拖慢页面的加载速 ...