程序员经验分享-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宽度的问题 的相关文章

  • 为什么json序列化器不符合多态性？

    我在 NET 4 5 Windows 应用商店应用程序中使用库存 JSON 序列化器 System Runtime Serialization Json DataContractJsonSerializer 我有一个由 API 提供商提供的

  • 类似于 Active Directory 中的搜索

    我正在使用 C 中的以下代码搜索 LDAP 以轮询用户的活动目录 DirectoryEntry entry new DirectoryEntry ldapPath userName password DirectorySearcher Se

  • 删除 QComboBox“下拉”动画

    我正在使用 Qt 4 8 并且想在单击 QComboBox 时摆脱 下拉 动画 我也想稍微移动一下 到目前为止 我一直在考虑重新实现 showPopup 和 hidePopup 但不知道如何使其工作 此外 每次我尝试使用 CSS 进行移动或

  • 将一个文件写入.c中的另一个文件

    我有一个读取文件然后将其内容复制到另一个文件的代码 我需要使其仅复制每 20 个符号 然后跳过 10 个符号 然后再次跳过 20 个符号 依此类推 我必须使用 lseek 函数 但我不知道如何将所有这些放入循环中来执行此操作 main ar

  • 尝试使用指向 ODBC DSN 的连接字符串时出现关键字不支持异常

    我为我的 Asp Net MVC 应用程序的数据库访问创建了一个 ODBC DSN 主要原因之一是它可以轻松地将数据库凭据 例如服务器地址 端口 用户名和密码 置于源代码控制之外 而不会妨碍我的发布能力 所以我将连接更改为DSN MyDSN

  • 如何检查特定作业是否在quartz调度程序中运行#

    我正在使用石英调度程序根据触发器的用户输入来安排写入文件的作业 我想检查作业是否仍在 stop 方法中运行 如何检查作业是否仍在运行 public class JobScheduler static StdSchedulerFactory

  • 如何在 TargetFrameworks 标记中每个框架运行一次的目标之前创建仅运行一次而不是一次的 MSBuild 目标？

    我有一个我部分拥有的代码生成器工具 现在 csproj 文件可以在其中列出多个目标框架并构建所有这些框架 我试图弄清楚如何使 MSBuild 目标仅在每个目标中生成一次代码无论列出了多少个目标框架 都将运行构建 并让每个目标框架的编译等待代

  • 将 dataGridView 绑定到绑定列表并按文本框过滤行

    我正在开发一个 Winforms 应用程序 并且有一个已经绑定到 dataGridView 的对象的 BindingList 我还有一个 过滤器 文本框 如果它们与文本框文本不匹配 我想从 datagridview 行中过滤掉行 我想以某种

  • WPF 应用程序在每个系统规模上具有相同的大小（与规模无关）

    有没有办法让 WPF 应用程序在每个系统规模上获得相同的大小 当我改变时更改文本 应用程序和其他项目的大小在windows系统设置中125 推荐 to 100 在全高清屏幕中 我的 WPF 应用程序变得太小 为了实现独立的系统缩放应用程序

  • DISM.exe 返回代码？

    我有一个程序调用 dism exe 程序 它在后台运行一些命令 现在 我只检查返回代码 0 或其他任何内容 以显示进程失败或成功 我可以用什么来交叉检查返回代码以获得准确的返回错误 DISM 参考了哪些回报 评论中提供的链接DISMAPI

  • OpenGL 中连续暂停

    void keyPress unsigned char key int x int y int i switch key case f i 3 while i x pos 3 sleep 100 glutPostRedisplay 上面是在

  • 执行按钮单击时使 wpf UI 响应

    在我的 wpf c 应用程序中 当用户按下按钮时会执行一个很长的过程 当按下按钮直到执行完整的代码时 窗口将冻结 用户无法在窗口中执行任何其他任务 如何使按钮单击代码作为后台进程 以便窗口响应用户 我尝试过以下方法 但没有成功 privat

  • Eclipse 调试模式下的 GDB 找不到 stdlib/rand.c

    我试图让 gdb 在 ubuntu 上与 eclipse cdt 一起运行 以开始调试一些简单的程序 所以我做了我认为必要的步骤来让它运行 1 创建可执行项目 2 Compile 3 Run 4 创建文件 gdbinit 并将其放在主项目文

  • opencv中矩阵的超快中值（与matlab一样快）

    我正在 openCV 中编写一些代码 想要找到一个非常大的矩阵数组 单通道灰度 浮点数 的中值 我尝试了几种方法 例如对数组进行排序 使用 std sort 和选择中间条目 但与 matlab 中的中值函数相比 它非常慢 准确地说 在 ma

  • Qt、PushButton、id 属性？有什么方法可以知道点击了哪个按钮

    void MainWindow addRadioToUI int button cunter 4 while database isEmpty button cunter QPushButton one new QPushButton Pl

  • 升压参数库

    最近我发现参数 http www boost org doc libs 1 50 0 libs parameter doc html index htmlBoost 中的库 老实说 我不明白为什么这是 Boost 的一部分 当需要向函数传递

  • 检测 Windows 重新启动是否是由于 Windows 更新造成的

    我的电脑上的一些应用程序一直在检测 Windows 更新是否重新启动 这是可以观察到的 因为它们会在 Windows 更新自动重启后重新启动 这非常有帮助 因为这些应用程序会重新加载更改 甚至unsaved更改或恢复选项卡 如果是浏览器 执

  • 警告 C4172：返回局部变量或临时变量的地址[重复]

    这个问题在这里已经有答案了 可能的重复 指向局部变量的指针 https stackoverflow com questions 4570366 pointer to local variable 我在这个网站上阅读了很多关于同一问题的其他主

  • .NET Web API - 添加日志记录

    我正在寻找有关处理 API 日志记录的最佳方法的帮助 我想将所有请求和响应记录到 sql 或文本文件 如果这是最好的方法 目前我已经在 SQL Server 的日志表中插入一行 我使用名为 LogAction 的静态方法来执行此操作 并在

  • 在 C# 中调用并排显示窗口

    愚蠢的问题是否有一种简单的方法可以清除桌面 然后打开两个资源管理器窗口并调用 并排显示窗口 任务栏调用 只是想知道 MS 库中是否有 api 可以做到这一点 您可以使用TileWindowsWinAPI 函数通过 p invoke 将所需窗

随机推荐

  • 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代码

热门标签