本文链接：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 Server 性能调优 之运行计划（Execution Plan）调优

    运行计划中的三种 Join 策略 SQL Server 存在三种 Join 策略:Hash Join,Merge Join,Nested Loop Join. Hash Join:用来处理没有排过序/ ...

  2. leetcode第九题--Palindrome Number

    Problem: Determine whether an integer is a palindrome. Do this without extra space. click to show sp ...

  3. 求最短路径算法之SPAF算法。

    关于求最短路径: 求最短路径的算法有许多种,除了排序外,恐怕是OI界中解决同一类问题算法最多的了.最熟悉的无疑是Dijkstra(不能求又负权边的图),接着是Bellman-Ford,它们都可以求出由 ...

  4. 如何用CSC.exe来编译Visual C#的代码文件

    原文:如何用CSC.exe来编译Visual C#的代码文件 C#的编译过程      如何用CSC.exe来编译Visual C#的代码文件   Csc.exe 编译器的位置路径:C:\Window ...

  5. html5 文件系统File API

    前言: 在做浏览器上传图片的时候,一般采用form表单上传,这种上传无法预览图片,无法查看图片大小,无法知道图片的类型等等!那么在html5 File API提供了这些表单无法实现的功能,而且还支持拖 ...

  6. WinForm窗体淡入效果界面的简单实现方法

    WinForm窗体淡入效果主要使用到控件的Opacity属性 首先在WinForm窗体中拖入一个Timer控件,然后再Timer控件的Tick事件添加如下代码: private void timer1 ...

  7. hudson任务配置说明

    hudson任务配置说明 Discard Old Builds:hudson默认保留过去的构建,勾选此选项,则可以设置构建记录的有效期: (帮助:这里控制着您想要在hudson所在的磁盘把构建记录存储 ...

  8. TodoList开发笔记 – PartⅠ

    做了一年多的桌面软件,最近开始转向Web方面的开发,既然比较熟悉Net那么首当其冲就是学习ASP.Net,以及HTML.CSS.Javascript. 为了检验这个把星期来的学习成果,着手做了一个To ...

  9. linux终端下文件不同颜色的含义

    偶然注意到在终端下花花绿绿的目录显示效果,开始以为只是些特效,后来研究了一下,原来其中有些规律性的东西,总结如下: 蓝色表示目录:

  10. 将网站固定到开始菜单，自定义图标、颜色和Windows推送通知

    Windows 8.1——将网站固定到开始菜单,自定义图标.颜色和Windows推送通知 记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务 ...