程序员经验分享-hwhale

CSS中设置表格TD宽度的问题

2023-11-19
 

CSS布局，表格宽度不听使唤的实例。想把表格第一例宽度设为20，其他自适应。但CSS中宽度是等宽的。只设这一行也不起作用。但是在实际应用中总是等宽处理，并不按照样式来走。

XML/HTML代码
  1. <table width="100%">  
  2.                          <tr>  
  3.                            <td colspan="6" align="center"><strong>少 儿 瑜 伽 课 程 </strong></td>  
  4.                          </tr>  
  5.                          <tr>  
  6.                            <td width="20"> 1</td>  
  7.                            <td ></td>  
  8.                            <td ></td>  
  9.                            <td ></td>  
  10.                            <td ></td>
  11.                           <td ></td>  
  12.                          </tr>  
  13.                          <tr>    
  14.                            <td width="20"> 2</td>  
  15.                            <td ></td>  
  16.                            <td ></td>  
  17.                            <td ></td>  
  18.                            <td ></td>
  19.                           <td ></td>  
  20.                          </tr>
  21.                        </table>  

修改过程一：如图把行整个设一次，不起作用。

XML/HTML代码
  1.                          <tr>  
  2.   
  3.                            <td width="20"> 1</td>  
  4.                            <td width="138" ></td>  
  5.                            <td width="138" ></td>  
  6.                            <td width="138" ></td>  
  7.                            <td width="138" ></td>
  8.                           <td width="138" ></td>  
  9.   
  10.                          </tr> 

修改二：把这行写法全部换成PX，不起作作。

XML/HTML代码
  1.                          <tr>  
  2.   
  3.                            <td style="width:20px; " > 1</td>  
  4.                            <td style="width:138px; "  ></td>  
  5.                            <td style="width:138px; "  ></td>  
  6.                            <td style="width:138px; "  ></td>  
  7.                            <td style="width:138px; " ></td>
  8.                           <td style="width:138px; " ></td>  
  9.                          </tr> 

修改三：这行改成CSS控制，也不起作用。

XML/HTML代码
  1. <tr>  
  2.   
  3.                            <td class="widtd_20"> </td>  
  4.                            <td class="width_138"> </td> 
  5.                            <td class="width_138"> </td> 
  6.                            <td class="width_138"> </td> 
  7.                            <td class="width_138"> </td> 
  8.                           <td class="width_138"> </td> 
  9.                          </tr>  
CSS代码
  1. td.widtd_20 {  
  2.     width:20px;   
  3. }  
  4. td.width_138 {  
  5.     width:138px;   
  6. }  

修改四：按修改三，把表格的每一行都用了CSS。还是不起作用。

修改五：在修改四的基础上，把每行的最后一个CSS控制去掉。还是不起作用。因为看了蓝色理想的文章，表格定义了100%，最后一个TD要让它自适应宽度。见下文，但这样改法还是不行。

XML/HTML代码
  1. <tr>  
  2.   <td class="widtd_20"> </td> 
  3.   <td class="width_138"> </td>
  4.   <td class="width_138"> </td>
  5.   <td class="width_138"> </td>
  6.   <td class="width_138"> </td>
  7.   
  8.   <td > </td>
  9. </tr>  

修改六：将上面的表格分成两个，其中定义宽度的行位于最上面，即解决问题。

XML/HTML代码
  1. <table width="100%">  
  2.                          <tr>  
  3.                            <td colspan="6" align="center"><strong>少 儿 瑜 伽 课 程 </strong></td>  
  4.                          </tr>  
  5. </table>
  6. <table width="100%">
  7.                          <tr>  
  8.                            <td width="20"> 1</td>  
  9.                            <td ></td>  
  10.                            <td ></td>  
  11.                            <td ></td>  
  12.                            <td ></td>
  13.                           <td ></td>  
  14.                          </tr>  
  15.                          <tr>    
  16.                            <td width="20"> 2</td>  
  17.                            <td ></td>  
  18.                            <td ></td>  
  19.                            <td ></td>  
  20.                            <td ></td>
  21.                           <td ></td>  
  22.                          </tr>
  23.                        </table> 

思路最后解决是因为看到蓝色理想的一个贴子关于Table中TD宽度设置的问题：（网页来源:http://bbs.blueidea.com/thread-2909153-1-2.html）

我给table定义了一个类，其中有width:100% 然后我给table中的一个td定义宽度width:30px
结果是td的宽度不受控制，但是如果将td宽度改为width:10%这样效果就出来了，但是对于不同屏幕宽度，显示还是会有问题，不知道是不是百分比和绝对宽度不能兼容。有人说用table-layout:fixed,试过了，不行。请大家出点策略

table-layout:fixed 之后，在第一行就要把各td的宽度（绝对宽度和百分比都可以）定好。如果table宽度定为100%了，那么要留一个td不设置宽度，让它自由伸缩。

 

 

来自百度介绍：怎样用CSS设置table第一列样式

网页来源：http://zhidao.baidu.com/question/83848919.html?fr=qrl&fr2=query

你编写表格的时候可以这样：
把第一列变成th ，这样就可以方便的控制了。
例如：三行三列的表格可以这样写：

XML/HTML代码
  1. <table>  
  2. <tbody>  
  3. <tr>  
  4. <th></th> <td></td><td></td>  
  5. </tr>  
  6. <tr>  
  7. <th></th> <td></td><td></td>  
  8. </tr>  
  9. <tr>  
  10. <th></th> <td></td><td></td>  
  11. </tr>  
  12. </tbody>  
  13. </table>   
CSS代码
  1. th{  
  2. width:100px;  
  3. }  
  4. td{  
  5. width:200px;  
  6. }  

css设置一列td宽度

解决办法：

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

解决办法二：

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

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

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

c

css

table

query

百度

CSS中设置表格TD宽度的问题 的相关文章

  • 类型中的属性名称必须是唯一的

    我正在使用 Entity Framework 5 并且有以下实体 public class User public Int32 Id get set public String Username get set public virtual

  • C++11 删除重写方法

    Preface 这是一个关于最佳实践的问题 涉及 C 11 中引入的删除运算符的新含义 当应用于覆盖继承父类的虚拟方法的子类时 背景 根据标准 引用的第一个用例是明确禁止调用某些类型的函数 否则转换将是隐式的 例如最新版本第 8 4 3 节

  • 为什么 GCC 不允许我创建“内联静态 std::stringstream”？

    我将直接前往 MCVE include

  • 从经典 ASP 调用 .Net C# DLL 方法

    我正在开发一个经典的 asp 项目 该项目需要将字符串发送到 DLL DLL 会将其序列化并发送到 Zebra 热敏打印机 我已经构建了我的 DLL 并使用它注册了regasm其次是 代码库这使得 IIS 能够识别它 虽然我可以设置我的对象

  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做

  • C++ 多行字符串原始文字[重复]

    这个问题在这里已经有答案了 我们可以像这样定义一个多行字符串 const char text1 part 1 part 2 part 3 part 4 const char text2 part 1 part 2 part 3 part 4

  • 需要帮助优化算法 - 两百万以下所有素数的总和

    我正在尝试做一个欧拉计划 http projecteuler net问题 我正在寻找 2 000 000 以下所有素数的总和 这就是我所拥有的 int main int argc char argv unsigned long int su

  • ASP.NET Core 3.1登录后如何获取用户信息

    我试图在登录 ASP NET Core 3 1 后获取用户信息 如姓名 电子邮件 id 等信息 这是我在登录操作中的代码 var claims new List

  • C# xml序列化必填字段

    我需要将一些字段标记为需要写入 XML 文件 但没有成功 我有一个包含约 30 个属性的配置类 这就是为什么我不能像这样封装所有属性 public string SomeProp get return someProp set if som

  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用

  • 为什么使用小于 32 位的整数？

    我总是喜欢使用最小尺寸的变量 这样效果就很好 但是如果我使用短字节整数而不是整数 并且内存是 32 位字可寻址 这真的会给我带来好处吗 编译器是否会做一些事情来增强内存使用 对于局部变量 它可能没有多大意义 但是在具有数千甚至数百万项的结构

  • 复制目录下所有文件

    如何将一个目录中的所有内容复制到另一个目录而不循环遍历每个文件 你不能 两者都不Directory http msdn microsoft com en us library system io directory aspx nor Dir

  • 为什么 isnormal() 说一个值是正常的，而实际上不是？

    include

  • C 函数 time() 如何处理秒的小数部分？

    The time 函数将返回自 1970 年以来的秒数 我想知道它如何对返回的秒数进行舍入 例如 对于100 4s 它会返回100还是101 有明确的定义吗 ISO C标准没有说太多 它只说time 回报 该实现对当前日历时间的最佳近似 结

  • 相当于Linux中的导入库

    在 Windows C 中 当您想要链接 DLL 时 您必须提供导入库 但是在 GNU 构建系统中 当您想要链接 so 文件 相当于 dll 时 您就不需要链接 为什么是这样 是否有等效的 Windows 导入库 注意 我不会谈论在 Win

  • C++ 中的 include 和 using 命名空间

    用于使用cout 我需要指定两者 include

  • DotNetZip：如何提取文件，但忽略zip文件中的路径？

    尝试将文件提取到给定文件夹 忽略 zip 文件中的路径 但似乎没有办法 考虑到其中实现的所有其他好东西 这似乎是一个相当基本的要求 我缺少什么 代码是 using Ionic Zip ZipFile zf Ionic Zip ZipFile

  • MySQL Connector C/C API - 使用特殊字符进行查询

    我是一个 C 程序 我有一个接受域名参数的函数 void db domains query char name 使用 mysql query 我测试数据库中是否存在域名 如果不是这种情况 我插入新域名 char query 400 spri

  • 指针和内存范围

    我已经用 C 语言编程有一段时间了 但对 C 语言还是很陌生 有时我对 C 处理内存的方式感到困惑 考虑以下有效的 C 代码片段 const char string void where is this pointer variable l

  • 如何确定 CultureInfo 实例是否支持拉丁字符

    是否可以确定是否CultureInfo http msdn microsoft com en us library system globalization cultureinfo aspx我正在使用的实例是否基于拉丁字符集 我相信你可以使

随机推荐

  • Oracle 事务

    文章目录 一 事务的基本概念 二 事务的特征 1 事务的原子性 Atomicity 2 事务的一致性 Consistency 3 独立性 Isolation 4 持久性 Durability 三 事务锁 1 多个会话同时处理一条数据 2 注

  • 比较文本差异的工具_Linux 开发的五大必备工具

    Linux 已经成为工作 娱乐和个人生活等多个领域的支柱 人们已经越来越离不开它 在 Linux 的帮助下 技术的变革速度超出了人们的想象 Linux 开发的速度也以指数规模增长 因此 越来越多的开发者也不断地加入开源和学习 Linux 开

  • [ArcGIS] 表格输出为shp时日期时间列只保留日期而时间被截掉

    1 首先将存有GPS数据的表格加载到ArcGIS中 2 然后右击表格 gt Display XY Data 生成矢量数据 查看dataall csv Events的属性表 可以看到此时的Time属性的值有日期和时间 3 然后右击dataal

  • PostgreSQL导出表结构

    Windows PgAdmin 环境变量配置 PG HOME D Program Files PostgreSQL 9 5 Path PG HOME bin PG HOME lib PG HOME data 最后追加 查看配置是否成功 出现

  • 编写 EL 自定义函数 的方法

    一 利用EL表达式调用普通Java类中的静态方法 1 编写一个java类 并编写一个静态方法 如下所示 public class ElDemo 静态方法 将小写转换为大写 public static String convert Strin

  • 【PAT乙级】锤子剪刀布

    题目描述 大家应该都会玩 锤子剪刀布 的游戏 两人同时给出手势 胜负规则如图所示 现给出两人的交锋记录 请统计双方的胜 平 负次数 并且给出双方分别出什么手势的胜算最大 输入格式 输入第 1 行给出正整数 N 10 5 即双方交锋的次数 随

  • numpy基本教程

    此处所指的数组就是numpy的ndarray 1 numpy加载npz文件 变量filename存放npz文件的地址 加载文件 data seq np load graph signal matrix filename data np lo

  • CSS选择器汇总

    CSS选择器汇总 选择器选择所有元素 选择器也可以选择另一个元素内的所有元素

  • solidworks启动慢的原因在这里

    你打开SOLIDWOKRS需要多长时间 有的人可能是十秒左右SOLIDWOKRS 有的人可能要等上一两分钟才能看到SOLIDWORKS的界面 那么我们今天抛开硬件的差异 主要针对软件和系统环境的设置帮助大家加快打开SOLIDWORKS的速度

  • HBase的Compact和Split源码分析与应用--基于0.94.5

    HBase的Compact和Split源码分析与应用 基于0 94 5 经过对比 0 94 5以后版本主要过程基本类似 有些新功能和细节增加 一 Compact 2 1 Compact主要来源 来自四个方面 1 Memstoreflush时

  • 数组、字符串、Math常用的API

    数组的API 方法 用法 concat 连接两个或多个数组 并返回已连接数组的副本 原数组不变 join 将数组的所有元素连接成一个字符串 返回字符串 原数组不变 toString 将数组转换为字符串 并返回结果 from 从对象创建数组

  • PID控制算法01

    PID控制算法 PID控制算法公式 原理 参数作用 PID算法及改进 两个基本类型 位置型PID控制 增量型PID控制 积分环节改进的PID控制 积分分离的PID控制 变速积分的PID控制 抗积分饱和的PID控制 微分环节改进的PID控制

  • 数据结构 --- 数组

    1 求数组中第二大的数 1 定义两个变量 2 const int MINNUMBER 32767 3 int find sec max int data int count 4 5 int maxnumber data 0 6 int se

  • 软件测试中动态测试与静态测试的区别

    这里讲一下软件测试中动态测试与静态测试的区别 静态测试主要包括 1 代码检查 代码会审 代码走查 桌面检查 2 静态结构分析 3 代码质量度量 动态测试主要包括 1 黑盒测试 又称功能测试 这种方法把被测软件看成黑盒 在不考虑软件内部结构和

  • 2023年深圳杯数学建模A题影响城市居民身体健康的因素分析

    2023年深圳杯数学建模 A题 影响城市居民身体健康的因素分析 原题再现 以心脑血管疾病 糖尿病 恶性肿瘤以及慢性阻塞性肺病为代表的慢性非传染性疾病 以下简称慢性病 已经成为影响我国居民身体健康的重要问题 随着人们生活方式的改变 慢性病的患

  • Python中的常见问题与解决方案

    机器学习作为当今最热门的领域之一 为数据科学和人工智能带来了巨大的突破和进步 然而 在Python中进行机器学习和深度学习开发时 我们可能会遇到一些常见的问题 本文将分享一些这些常见问题 并给出解决方案 帮助您更好地进行机器学习和深度学习的

  • js 正则exec()函数在循环中使用

    在每次循环中 需要把正则表达式的lastIndex重置为0 如 reg lastIndex 0

  • Swift Codable 自定义默认值解码

    前言 最近我们公司服务端修改了某个接口返回数据结构 减少了一些字段 导致iOS这边codeable解码失败 获取不到正确的数据信息 相关业务无法完成 不想使用可选值类型 可以使用属性包装器实现对基础类型的包装 decode解析时给定默认值

  • 编写高质量代码:改善Java程序的151个建议(第7章:泛型和反射___建议101~109)

    我命由我不由天 哪吒 建议101 注意Class类的特殊性 建议102 适时选择getDeclaredXXX和getXXX 建议103 反射访问属性或方法时Accessible设置为true 建议104 使用forName动态加载类文件 建

  • CSS中设置表格TD宽度的问题

    CSS布局 表格宽度不听使唤的实例 想把表格第一例宽度设为20 其他自适应 但CSS中宽度是等宽的 只设这一行也不起作用 但是在实际应用中总是等宽处理 并不按照样式来走 XML HTML代码

热门标签