`
anna_zr
  • 浏览: 200611 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

table中的宽度设置

    博客分类:
  • css
阅读更多
css设置一列td宽度

我的方法:
在css代码中设置td的width:5%(太大的话看不出效果)

下面是从网上看到的两个解决方法:

解决办法一:

1.插入表格。30行两列,宽380px
2.鼠标点在第一个单元格中(一行一列),在属性面板中输入宽度100
3.完成

解决办法二:

CSS代码
td.p10 {width:10%;}  
td.p15 {width:15%;}  
td.p20 {width:20%;}  
td.p45 {width:45%;}   
XML/HTML代码
<td class="p10">...</td>  
<td class="p10">...</td>  
<td class="p20">...</td>  
<td class="p15">...</td>  
<td class="p45">...</td>   

上述的百分比,也可以换成px 。此处来源:http://zhidao.baidu.com/question/62832227.html


上面两个例子中发现如果设置CSS,宽度还是不起作用,一定要看第一行是否设置了宽度。如果是自适应的话,且表格设置100%的话,最好拆成两个表格处理。至于为什么?不清楚。

分享到:
评论

相关推荐

    table自动宽度拉伸

    在网页设计中,表格(Table)是一种常见的数据展示方式,尤其在处理结构化信息时。然而,当表格的内容过多或过宽时,如何使表格适应不同的屏幕尺寸并保持良好的可读性,就成为了一个重要的问题。"table自动宽度拉伸...

    改变table的列宽度

    改变table的列宽度,可以拖拽的td表格,表格内文字只显示一行,超过的部分自动隐藏

    表格设置table-layout:fixed后对单元格宽度设置无效

    在实施解决方案时,还需注意一些细节问题,例如确保CSS中table-layout属性设置为fixed,并且表格宽度也被适当地指定,以便于固定布局的生效。同时,当使用col标签指定宽度时,也需要在相应的col标签中明确指定width...

    JS手动改变table的宽度

    2. **设置表格宽度**: 获取到表格对象后,我们可以通过`style.width`属性来设置表格的宽度。这个属性接受一个带有单位的字符串,如像素(px)、百分比(%)等。 ```javascript table.style.width = '500px'; // ...

    改变el-table宽度

    在给定的场景中,开发者想要实现一个功能,即允许用户通过拖动表格列宽来调整列的宽度,并将这些自定义设置保存到浏览器的localStorage中,以便在用户下次访问时恢复这些设置。这个功能可以提供更好的用户体验,让...

    jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置

    本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中,通过拖动表头来任意调整列宽度的功能,这个功能适用于各种列表页面,如数据展示、报表分析等场景。 首先,我们需要引入jQuery库,它是...

    实现bootstrap table可设置列宽和可拖动列宽

    在这个例子中,"ID" 列的宽度被设置为 100 像素,"Name" 列的宽度被设置为 200 像素,而"Price"列则没有明确设置宽度,因此会自动填充剩余空间。 然而,仅仅设置列宽并不能实现拖动列宽的功能。为了达到这个效果,...

    任意改变table表格td的宽度 支持表格TD拖拽

    标题“任意改变table表格td的宽度 支持表格TD拖拽”和描述中反复提到的“动态td的宽度”,就是指这种功能,即允许用户通过拖动来调整表格单元格的宽度。 实现这一功能通常需要结合JavaScript(或者更高级的库如...

    css table width表格宽度样式设置定义.docx

    css 表格宽度样式设置定义是 Web 开发中一个基本而又重要的概念。它涉及到 HTML 和 CSS 两方面的内容。通过本文,我们将详细探讨如何通过 HTML 和 CSS 来定义表格的宽度,并且探讨不同的定义方法的优缺点。 一、...

    table表格拖动改变td宽度

    在网页设计中,`table`元素是用于展示结构化数据的重要工具。然而,传统的`table`元素的列宽通常是固定的,不能轻易地根据用户需求进行调整。"table表格拖动改变td宽度"这一功能,正是为了提升用户体验,允许用户...

    td 内容自动换行 table表格td设置宽度后文字太多自动换行

    综上所述,解决表格中单元格内容超出宽度自动换行的方法是设置表格的布局为固定宽度,并且给单元格添加`word-wrap: break-word;`的样式规则。这样做既保持了布局的整齐性,又确保了内容的完整显示。希望这篇文章能够...

    用于设置ant-design-vue中table组件的列宽可拖拽

    vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽

    table 表格宽度拖动demo

    在IT领域,尤其是在前端开发中,表格(Table)是一种常用的数据展示方式,它能够清晰、规整地排列信息。在实际应用中,用户有时需要根据自身需求调整表格列的宽度,以便更好地查看和理解数据。"table 表格宽度拖动...

    html解决table设置宽度无效的问题

    如果对table设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效。 解决方法: 在tbody前面加 .detail { padding-bottom: 50px; margin-top

    可调整列宽TABLE

    在网页设计中,"可调整列宽TABLE"是一种常见的交互式数据展示技术,它使得用户可以根据需要自由调整表格中列的宽度。这种功能通常应用于数据量大、信息丰富的表格,以便用户能更清晰地查看和理解数据。下面将详细...

    table嵌套table边框样式

    在网页设计中,表格(Table)是用于组织数据的重要元素,而当表格嵌套时,如何设置合适的边框样式就显得尤为重要。`table嵌套table的边框样式`是一个常见的需求,尤其在处理复杂的数据展示时。本篇将详细介绍如何...

    JQuery table改变列的宽度

    2. **CSS样式操作**:jQuery可以用来修改元素的CSS样式,包括设置宽度。例如,`$("td").css("width", "200px")`会将所有`td`元素的宽度设为200像素。 3. **事件绑定**:jQuery提供了丰富的事件处理方法,如`click()...

    设置table中的宽度不随文字改变让其固定

    页面中table宽度设置width=600px之后,宽度仍然不是固定的,文字太长后不换行,把table都撑变形了。 解决办法: 1.table 设置 宽度,绝对宽度和相对都可以 table-layout:fixed ; 设置了这个属性,其余所有td都是...

    html中table为每个单元格设置不同颜色和宽度

    3. 设置表格宽度和高度时,可以通过在&lt;table&gt;标签中直接使用width和height属性来指定。为了保持代码的清晰和避免兼容性问题,推荐使用内联样式(style)来设置这些属性。这样做可以确保样式的有效应用并提供更好的跨...

    基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件

    它由多个table-column定义,每个table-column对应表格的一列,可以设置字段名、标题、宽度等属性。二次封装的过程就是对这些table-column进行扩展,添加新的功能和行为。 在实现自适应列宽的功能时,我们可能会采用...

Global site tag (gtag.js) - Google Analytics