如何将表格行内容作为表单输入且不影响表格行原有显示样式

云原生阿岚

2026-10-5

解决方案

你遇到的空白是<input>元素默认的边框、背景色、内边距导致的，结合你用的Bootstrap表格场景，有两种常用实现方案：

方案1：重置input样式，让它和单元格完全融合

给需要放在表格内的input添加自定义CSS，覆盖默认样式：

/* 放在你的样式文件里，或者页面的<style>标签中 */
.table-cell-input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    box-shadow: none !important;
    text-align: inherit;
}
.table-cell-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

然后修改Blade模板里的input代码，加上这个类即可：

<td><input type="text" class="table-cell-input" name="fsp_id" value="{{ $plan->fsp_id }}"></td>

方案2：用隐藏input传值，直接展示文本（更推荐）

如果你不需要用户修改这些字段的值，完全不需要用可显示的input，直接在单元格里输出文本，搭配隐藏input提交数据即可，完全不需要处理样式问题：

@foreach( $my_plans as $plan )
<tr>
    <td><input class="form-check-input" name="choose_to_pay" type="radio" value="{{ $plan->fsp_id }}"></td>
    <td>
        {{ $plan->fsp_id }}
        <input type="hidden" name="fsp_id[]" value="{{ $plan->fsp_id }}">
    </td>
    <td>
        {{ jdate( strtotime( $plan->created_at ) )->format( 'Y/m/d' ) }}
        <input type="hidden" name="plan_date[]" value="{{ jdate( strtotime( $plan->created_at ) )->format( 'Y/m/d' ) }}">
    </td>
    ....
</tr>
@endforeach