HTML表格与文本域铺满单元格设置方法-html教程-PHP中文网

要使textarea铺满td，需三层控制：td设固定宽高且padding为0；textarea设display:block、width/height:100%、margin/border:0、padding及box-sizing:border-box；注意移动端height:100%兼容性问题。

html表格与文本域铺满单元格设置方法

HTML 表格里放或其他表单控件时，想让它“铺满单元格”，不是加个 width="100%" 就完事——多数情况下它只占内容宽，上下留白、左右缩进、换行错位全会出现。根本原因是 默认有 padding，且是替换元素（replaced element），不自动继承父容器的盒模型行为。

`为什么 width: 100% + height: 100% 失效`


直接给  设 width: 100%; height: 100% 通常没用，因为：
 没设 height，height: 100% 就失去参照（百分比高度必须有明确的父高）

 的默认 border 和 padding 会撑出额外空间，导致实际宽度超 100%


box-sizing 默认是 content-box，宽度只算内容区，不包含边框和内边距
表格在 table-layout: auto 下，列宽由首行内容决定， 的初始尺寸可能被忽略

 铺满  的最小可行写法要让  真正贴边填满单元格，关键在三层控制：单元格尺寸固定、内容容器重置盒模型、文本域自身拉伸。

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										
给  显式设 width 和 height（比如 width: 200px; height: 120px），或用  +  控制列宽，再配合 tr { height: 100px }
给  加 display: block; width: 100%; height: 100%; margin: 0; border: 0; padding: 4px; box-sizing: border-box;

必须确保  的 padding 为 0，否则 width: 100% 会相对于“内容区”计算，而非单元格盒边界
如果表格用了 border-collapse: collapse，注意  的 border 可能和表格边框重叠，建议统一用 border: 1px solid #999 显式定义

兼容性与移动端注意事项
在 iOS Safari 或旧版 Android 浏览器中， 的 height: 100% 容易失效，尤其当父  高度靠百分比或视口单位（如 vh）计算时。稳妥做法是：
放弃对  或  使用 height: 100vh，改用固定像素值或 min-height
用 resize: none 禁用拖拽，避免用户手动拉伸破坏布局

若需响应式，不要依赖 vh 驱动单元格高度，而是用容器 flex 布局 + flex: 1 控制表格整体高度，再让  在已知高度的  内拉伸
测试时重点看：输入长文本是否触发滚动条、是否撑破单元格、焦点进入时是否意外放大（iOS 自动缩放）

真正难的不是写几行 CSS，而是意识到：表格单元格不是普通容器，它有自己的渲染规则；而  也不是 div，它的尺寸逻辑更接近图片。两者叠加时，任何一处 padding、box-sizing 或 height 来源缺失，都会让“铺满”变成幻觉。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！