如何在不影响 table 行样式的情况下将 table 行显示为表单输入

Question

我有一个 table 并在 Blade 上用这个 table 检索了一些数据。

现在我添加了一个复选框作为此 table 的第一列。

<form method="POST" action="{{ route('finalFestival') }}">
   @csrf
   <table class="table table-sm table-bordered table-striped table-hover">
   <thead class="thead-dark">
      <tr>
         <th>Choose to pay</th>
         <th>Tracking Code</th>
         <th>Date of Submission</th>
         ...
      </tr>
   </thead>
   <tbody>
   @foreach( $my_plans as $plan )
      <tr>
         <td><input class="form-check-input" name="choose_to_pay" type="radio" value="checked"></td>
         <td><input type="text" name="fsp_id" value="{{ $plan->fsp_id }}"></td>
         <td><input type="text" name="plan_date" value="{{ jdate( strtotime( $plan->created_at ) )->format( 'Y/m/d' ) }}"></td>
         ....
      </tr>
   @endforeach
   </tbody>
   </table>
   <button class="btn btn-primary" type="submit">Submit</button>
</form>

这里的输出是：

screenshot of current table layout

但是如果 <input> 出现在它的值周围，我不会看到白色区域。我只想用 name 和他们的自定义 value 显示输入，就像 <table> 行的默认行为一样：

screenshot of desired table

在上图中，我没有为每个 <td> 指定任何 <input>，只要我定义它们，它就会显示带有白色 Space 的输入值。

那么如何删除此 space 并像默认值一样显示输入 table <td>？

Answer 1

input{
    background-color : #e4e4e4;
    border : none;
    outline : none;
}

如何在不影响 table 行样式的情况下将 table 行显示为表单输入

How to show table rows as form inputs without affecting style of table rows

css

php

forms

laravel

laravel-5.8