响应式表格和文本域需CSS主动控制宽度、换行、溢出及媒体查询；table须设border-collapse:collapse和width:100%，单元格需max-width:0+ellipsis防撑宽；textarea应禁用resize水平拉伸、设min-height和font-size:16px；小屏下表格宜转为滚动容器或卡片流，表单提交区推荐flex垂直堆叠对齐。
响应式表格和文本域本身不自动适配，必须靠 CSS 主动控制宽度、换行、溢出和媒体查询干预，否则在小屏上必然横向滚动或内容截断。
table 元素默认不响应式，必须加 border-collapse 和 width 控制
浏览器对 <table> 的默认渲染是“尽可能宽”，哪怕父容器只有 320px，它也可能撑到 800px。不加干预时，<code>overflow-x: auto 只是补救，不是响应式。
-
border-collapse: collapse必须设，否则边框间距会放大整体宽度 -
table { width: 100% }是起点，但仅此不够 —— 它只约束表格外框，不约束内部单元格 -
th, td { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }才能防文字撑开列宽 - 避免用
colspan或rowspan在小屏下破坏行列对齐逻辑，复杂合并建议改用卡片式布局替代
textarea 的 resize 和 rows 属性要配合 min-height 使用
原生 textarea 在移动端常被缩成一条细线，或拉伸后遮挡按钮。单纯设 width: 100% 不解决问题。
-
resize: vertical比both更安全，禁用水平拉伸可防布局错位 -
rows是初始行数，但实际高度受line-height和padding影响，建议统一用min-height: 120px替代 - 在小屏上，
textarea建议加font-size: 16px（避免 iOS 自动缩放）和padding: 12px（保证点击热区） - 不要依赖
height: 100%，它在 flex 容器中易失效；优先用flex: 1或固定min-height
小屏下表格必须用 @media 切换为滚动容器或卡片流
当列数 ≥ 4 或有长文本字段（如地址、描述）时，强行压缩列宽会导致可读性崩溃。此时响应式不是“让表格变小”，而是“换一种结构呈现”。
立即学习“前端免费学习笔记（深入）”；
- 桌面端保持
<table>，小屏用 <code>@media (max-width: 768px)包一层<div class="table-scroll"> 并设 <code>overflow-x: auto - 更优解是用
display: block隐藏<table>，同时用 <code><section class="card-list"></section>在小屏显示每条数据为独立卡片 - 卡片内用
<dl> <dt>姓名</dt> <dd>张三</dd> </dl>模拟字段-值结构，语义清晰且无需 JS - 注意：不要在卡片里再嵌套
<table>，那等于把问题从一层转到另一层 <h3>form 表单提交区域的对齐容易被 <code>textarea拉偏当
textarea和input[type=submit]同级放在<form></form>内，且未设vertical-align或flex对齐时，按钮常被顶到右上角或底部悬空。- 推荐用
display: flex; flex-direction: column包裹所有控件，按钮设align-self: flex-end - 若用 float 布局，
textarea必须设clear: both，否则会被前面的 label 或 input 浮动影响位置 -
label和textarea的margin-bottom要一致，否则视觉节奏断裂（常见坑：label 设了 8px，textarea 却没设） - 提交按钮在小屏上建议加
width: 100%，避免窄屏下按钮过短导致误点
真正卡住人的从来不是“怎么写表格”，而是“什么时候不该用表格”。文本域和表格混排时，优先考虑数据流向：用户是扫视结构化字段，还是聚焦一段自由输入？前者靠表格语义，后者靠留白与垂直节奏 —— 这两者在 CSS 里要用完全不同的盒模型策略处理。
- 推荐用
