<table>单元格的宽度是根据内容的大小自适应的，没有内容的地方就挤到了一起。需要固定表格宽度和每一列的宽度。

table-layout:fixed

在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

超过指定长度的文本以省略号的形式显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<style>

* {

    padding: 0;

    margin: 0;

}

table {

    width: 300px;

    table-layout:fixed;

}

.first_col {

    white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

    width: 150px;

}

.first_col_text {

    white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

    display: inline-block;

    color: red;

    width: 120px;

}

img {

    width: 20px;

    height: 20px;

    margin-right: 5px;

}

.second_col {

    white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

    width: 100px;

}

.third_col{

    white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

    width: 50px;

}

</style>

</head>

<body>

<table border="1" cellspacing="0" cellpadding="0">

  <tr>

    <td class="first_col">

        <span class="first_col_text">123456789012345</span>

        <img src="http://tb2.bdstatic.com/tb/editor/images/face/i_f23.png?t=20131111">

    </td>

    <td class="second_col">12345678901234567890123456789012345678901234567890</td>

    <td class="third_col">1</td>

  </tr>

  <tr>

    <td class="first_col"></td>

    <td class="second_col"></td>

    <td class="third_col">12345678901234567890123456789012345678901234567890123456789012345678901234567890</td>

  </tr>

  <tr>

    <td class="first_col">123456789012345</td>

    <td class="second_col"></td>

    <td class="third_col"></td>

  </tr>

</table>

</body>

</html>

显示效果：

CSS实现table固定宽度，超过单元格部分内容省略的更多相关文章

  1. css实现table中td单元格鼠标悬浮时显示更多内容

    table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span cl ...

  2. 前台JS遍历Table的所有单元格数据内容

    在日常开发过程中为了减少与后台服务器的交互次数,大部分的功能都会放到前台使用JS来完成. 例如:一个表中有ID(FOCUS_SEQ)和Name(COLUMNCTRL)两个字段,其中ID是自定义连续增长 ...

  3. Easyui datagrid 设置内容超过单元格宽度时自动换行显示

    datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下 ...

  4. 使用CSS和JQuery实现表格单元格内容超出时部分隐藏，隐藏部分以...显示

    1.使用CSS实现,给此单元格添加一个Class: width:130px; display:block; overflow:hidden; word-break:keep-all; white-sp ...

  5. 给bootstrap table设置行列单元格样式

    1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...

  6. JS遍历Table的所有单元格内容

    用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: 这个方法的参数是唯一标识Table的id,用document对象的获取. function GetInfoFromTable(ta ...

  7. JS去遍历Table的所有单元格中的内容

    用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现 function GetInfoFromTable(tableid) { var tableInfo = ""; ...

  8. 分列：将excel单元格的内容拆分为两列

    提要:处理excel数据时有时需要把单元格的内容拆分为两列,可能方便外部软件的链接,可能使数据显示更明晰等等,有人说直接剪切加粘贴不就可以了吗,但是有时数据过多,这样处理很不效率,网上搜索的方法说插入 ...

  9. 请教 JTable 里的单元格如何使得双击进入单元格后，单元格的内容处于全选中状态

    http://bbs.csdn.net/topics/390195204 ———————————————————————————————————————— java 达人, 最近在开发一个 java  ...

随机推荐

  1. windows、Linux同步外网NTP服务器时间

    配置 Windows 时间服务以使用外部时间源 要将内部时间服务器配置为与外部时间源同步,请使用以下方法之一: 软件自动配置  Windows 时间服务 若要自动修复此问题,请单击“下载”按钮. 在“ ...

  2. poj 2349 求最小生成树里面第m长的边

    题目链接:https://vjudge.net/problem/POJ-2349 题意: 题目就是要我们找到一个最小的值D,把图里面所有大于D的边去掉之后剩余的连通分支的数量为S.这个就是找这个图里面 ...

  3. 动态加载、移除js、css

    本文简单介绍动态加载.移除.替换js/css文件 .有时候我们在写前端的时候,会有出现需要动态加载一些东如css js 这样能减轻用户加载负担,从而提高响应效率.下面贴出代码.//JS写法 <s ...

  4. IIC基本概念和基本时序

    1. IIC基本概念和基本时序 1.1 I2C串行总线概述 I2C总线是PHLIPS公司推出的一种串行总线,是具备多主机系统所需的包括总线裁决和高低速器件同步功能的高性能串行总线. 1.I2C总线具有 ...

  5. 使用安装脚本安装Texlive

    介绍 TeX Live 是 TUG (TeX User Group) 维护和发布的 TeX 系统,可说是「官方」的 TeX 系统.网上可找到的教程大多是从镜像安装完整版texlive.镜像发布的周期较 ...

  6. [leetcode]339. Nested List Weight Sum嵌套列表加权和

    Given a nested list of integers, return the sum of all integers in the list weighted by their depth. ...

  7. node.js中express框架的基本使用

    express是一个基于node.js平台的,快速,开放,极简的web开发框架. 一.安装 express npm install express --save 二.简单使用 express //引入 ...

  8. Python3,x：Fiddler抓包工具如何进行手机APP的数据爬取

    示例一:苹果手机抓取教程 https://www.cnblogs.com/lizm166/p/8693085.html https://blog.csdn.net/cui130/article/det ...

  9. vuex 中五大核心以及map函数的应用

    什么是vuex? 我理解的vuex就是数据和状态的管理 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex) 五大核心: const store = new Vuex.Store({ ...

  10. POJ 1655.Balancing Act 树形dp 树的重心

    Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14550   Accepted: 6173 De ...