本文链接：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. leetcode第三题--Longest Substring Without Repeating Characters

    Problem:Given a string, find the length of the longest substring without repeating characters. For e ...

  2. Visual Studio 使用调试技巧

    Visual Studio 使用调试技巧 这篇文章来源于http://damieng.com/blog/2014/02/05/8-visual-studio-debugging-tips-debug- ...

  3. PHP中实现在数据库中的增、删、查、改

    其实要想在PHP中访问并获取到数据库中的数据其实并不难,下面我以例子为大家介绍: 首先,打开PHP软件和WampServer服务,确保在WampServer中的phpMyAdmin中有你要使用的数据表 ...

  4. ASP.NET MVC Model绑定

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

  5. NPOI封装

    一.对于Excel的操作封装主要针对对于Excel的写入的封装,对于打印基类的封装主要引入了两个概念 1.打印区域模板类 2.打印集合类 如实例模板中需要打印的区域模块 如实例模板中需要打印的集合类 ...

  6. EntityFramework中支持BulkInsert扩展

    EntityFramework中支持BulkInsert扩展 本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 前言 很显然,你应该不至于使用 Ent ...

  7. 一个ASP.NET Web API 2.0应用

    在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用 由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.N ...

  8. 最小的MVC工程

    asp.net mvc笔记一,最小的MVC工程   Asp.net MVC项目默认会引用很多第三方插件,特别是现在的5.0,默认示例项目就几十M,搞得都不知道那些才是MVC必须的,是重点,那些是可有可 ...

  9. 玩转python之字符串逐个字符或逐词反转

    众所周知,python中的字符串是无法改变的,反转一个字符串自然要创建一个拷贝:最简单的方法,当然是步长为“-1”的切片: result = astring[::-1] 如果要是按单词来反转,需要三步 ...

  10. 使用LFM（Latent factor model）隐语义模型进行Top-N推荐

    最近在拜读项亮博士的<推荐系统实践>,系统的学习一下推荐系统的相关知识.今天学习了其中的隐语义模型在Top-N推荐中的应用,在此做一个总结. 隐语义模型LFM和LSI,LDA,Topic ...