响应式表格必须用 .table-responsive 包裹整个 table，不可嵌入 .form-group 或 .form-floating 内；需手动添加样式模拟 .is-invalid 效果；触摸设备应避免 .table-hover，改用 js 动态高亮或按钮交互；angular/react 中推荐用 div+grid 替代原生 table 以保障表单逻辑稳定。
响应式表格不能直接塞进 .form-group 或 .row 里
Bootstrap 表单容器（如 .form-group、.col）默认不处理表格的横向溢出，直接把 <table class="table"> 放进去，小屏下照样撑破父容器、破坏表单布局。这不是表格写错了，是容器没兜住——<code>.table 本身无响应式能力，它只管样式，不管滚动。
必须用 .table-responsive 包裹整个 <table>，且这个 wrapper 得是表单结构里的独立块级元素，不能被 <code>.form-control 类干扰，也不能和 .input-group 混套。
-
.table-responsive必须直接包裹<table>，不能只包 <code><tbody> 或某几列 <li>若表单用了 <code>form-floating，别把.table-responsive塞进<div class="form-floating"> 内部——浮动标签逻辑会误判高度，导致滚动条错位或不可见 <li>在 <code>.row > .col结构中，给.table-responsive加width: 100%更稳妥（尤其配合flex布局时），否则某些版本 Bootstrap 会因 flex shrink 导致表格缩窄变形 - 给
.table-responsive加border: 1px solid #dc3545和padding: 0.375rem 0.75rem模拟.is-invalid效果 - 避免在
.table-responsive上直接加.is-invalid类——它没对应 CSS 规则，纯属无效 class - 如果表格内嵌了可编辑单元格（如
<input class="form-control">），确保每个 input 单独加.is-invalid，而不是指望父容器统一控制 - 去掉
.table-hover，改用data-bs-toggle="button"+.btn样式按钮嵌在每行末尾，显式点击才触发 - 若必须高亮选中行，用 JS 监听
click，动态加.table-active类到<tr>，并确保该类有明确背景色定义（Bootstrap 默认的 <code>.table-active在部分主题下可能不明显） - 别依赖
onmouseover做表单校验提示——触摸设备没 mouseover，得补touchstart或统一用 click - 用
<div class="row border-bottom"> 替代 <code><tr>，每个字段用 <code><div class="col-md-3"> 对齐 <li>响应式靠 <code>col-*-*断点自动堆叠，比.table-responsive的横向滚动更符合移动端直觉 - 表单验证状态（如
.is-invalid）能自然作用于每个<input>所在的.col容器，无需额外 hack
table-responsive 和表单验证状态类共存时的冲突点
当表格用于展示表单校验结果（比如字段级错误明细），你可能想叠加 .is-invalid 到外层 <div>。但 <code>.is-invalid 默认只影响 .form-control、.custom-select 等控件，对 .table-responsive 无样式作用——它不会变红边框，也不会触发反馈图标。
真要视觉联动，得手动补样式：
移动端触摸场景下 table-hover 的实际表现
在表单里嵌入带 .table-hover 的表格，用户用手机点选某行想触发操作（比如“设为默认地址”），但点击后没反馈——不是 JS 没绑事件，是 .table-hover 依赖 :hover 伪类，而 iOS/Android 浏览器在触摸设备上基本不触发 hover 状态（仅 Safari 某些版本有短暂延迟模拟，不可靠）。
解决方案不是禁用，而是换交互逻辑：
Angular / React 项目里嵌套表格要绕开原生 <table> 语义
<p>在 Angular 表单或 React 表单组件中硬塞 <code><table class="table table-responsive">，容易和框架的表单控件生命周期冲突：比如 <code>NgControl 找不到关联的 name，react-hook-form 的 register() 不识别 <table> 下的 <code><input> 路径。
更可控的做法是放弃 <table> 标签，用 <code>div + Bootstrap Grid 模拟表格结构：
真正难的不是让表格“看起来像表格”，而是让表单逻辑、校验、提交数据结构不崩——这时候语义让位于可控性。
