css实现table固定宽度,超过单元格部分内容省略

我不吃饼干呀      2022-02-10     681

关键词:

<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>

 

 显示效果:

 

尝试通过使用 UICollectionViewCompositionalLayout 实现固定高度、动态宽度(包装内容)水平 UICollectionView 的单元格

】尝试通过使用UICollectionViewCompositionalLayout实现固定高度、动态宽度(包装内容)水平UICollectionView的单元格【英文标题】:Attempttoachievefixedheight,dynamicwidth(wrapcontent)horizontalUICollectionView\'scellbyusingUICollectionViewCompositionalLayout【发布... 查看详情

table里面放input去掉线

如何去掉bootstraptable中表格样式中横线竖线css实现table中td单元格鼠标悬浮时显示更多内容jquery遍历table获取td单元格的值C#对Excel单元格格式,及行高、列宽、单元格边框线、冻结设置C#Excel行高、列宽、合并单元格、单元格边框线... 查看详情

css实现内容超过长度后以省略号显示

样式:{width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}说明:white-space:nowrap保证文本内容不会自动换行,如果多余的内容会在水平方向撑破单元格。overflow:hidden隐藏超出单元格的部分。text-overflow:ellipsis将被隐藏的那部分... 查看详情

如何控制listview每列的宽度自适应这列最长的内容

..."命令。4、选择"自动调整列宽"命令后,即可实现让选中单元格根据所填写的内容自动调整列宽。5、也可以设置当输入内容超过单元格宽度时自动换行,在"开始"选项卡下的"对齐方式"选项组中,单击&quo... 查看详情

table宽度(代码片段)

...ttable-layout定义了表格布局算法,值为auto或fixed。fixed采用固定表格布局算法对表格布局。表格的宽度有width决定,列的宽度有首行单元格的width决定。先上一个demo。分析一下,这里table计算宽度为200px,第一列的计算宽度为100px,... 查看详情

确保遵守表格单元格的宽度

】确保遵守表格单元格的宽度【英文标题】:Ensurethattablecellwidthsarerespected【发布时间】:2012-02-2504:25:26【问题描述】:我有一个带有多个列的HTML&lt;table&gt;。如何确保在任何情况下都遵守给定的单元格/列宽度?也就是说,... 查看详情

html中,如何固定table单元格宽度?

...比较好看的table。参考技术Astyle="table-layout:fixed;"固定布局的算法。在这种情况下,表格和列的宽度取决于col对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的 查看详情

table-layout:fixed的作用

...tableLayout属性用来显示表格单元格、行、列的算法规则。固定表格布局:固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格... 查看详情

table中td中内容如何实现自动换行

...符串中有空格或者标点符号就可以。汉字组成的字符可以实现自动换行就算没有任何符号空格都行。如果纯字母组成的字符串就不行2下面这种情况也是使用上面的代码调整过来的。页面table中一行两列,但是虽然设置了左边td的... 查看详情

固定宽度表 - 具有不同宽度的单元格?

】固定宽度表-具有不同宽度的单元格?【英文标题】:Fixedwidthtable--withdifferentwidthcells?【发布时间】:2012-09-2604:22:49【问题描述】:<table><tr><td>One</td><td>Two</td><tdclass="skinny">$$</td><td>Four 查看详情

html中表格内容超出后隐藏问题

...在每一单元格读取计算之后才会显示出来。速度很慢fixed:固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关说明:设置或检索表格的布局算法。对应的... 查看详情

表格+表单

...out:auto/fixed; 单元格宽度随内容变大,自适应,宽度不固定/单元格宽度不会随内容变大,固定单元格宽度(高度限制不了)三、表单元素1、input     type="radio" 单选按钮,同一组的name值必须相同,才可以... 查看详情

html表格单元格的宽度和高度的设置

做网页的时候,经常会碰到表格宽度对不齐的问题。详细地看了html中表格标签table的高度和宽度设置的细节,现总结如下:       1、table中的width和height设置及其作用:table中设置的height其实是设置个最... 查看详情

css设置表格td宽度布局

  使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下:一、表格布局table-layout  语法:     table-layout:auto|fixed  取值:    auto :大多数浏览器采用自动表格布局算法对表格布局;表格及... 查看详情

UICollectionView 单元格在swift中使用约束固定宽度和动态高度

】UICollectionView单元格在swift中使用约束固定宽度和动态高度【英文标题】:UICollectionViewcellfixedwidthanddynamicheightusingconstraintsinswift【发布时间】:2019-09-1205:32:20【问题描述】:我有一个集合视图和一个单元格,里面有一个基于其内... 查看详情

easyuidatagrid设置内容超过单元格宽度时自动换行显示

datagrid设置内容超过单元格宽度时自动换行显示by:授客QQ:1033553122 测试环境jquery-easyui-1.5.3 问题描述单元格内容超过单元格宽度不会自动化换行。如下:图1:   图2:   解决方法定义表格时,设置nowr... 查看详情

table-layout表格宽度不随文字改变

...单元格、行、列的算法规则。fixed:水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。auto(默认):列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢,这是由于... 查看详情

如何在表格分类器中设置固定表格宽度(不是单元格)?

】如何在表格分类器中设置固定表格宽度(不是单元格)?【英文标题】:Howtosetfixedtablewidth(notcell)intablesorter?【发布时间】:2015-12-2809:50:16【问题描述】:我使用表格排序器。根据表格内容不同的页面(分页)可以有不同的宽... 查看详情