如何在不更改列宽的情况下将输入字段放在表头上？答案

【问题标题】：How to put input fields on table headers without changing columns widths?如何在不更改列宽的情况下将输入字段放在表头上？
【发布时间】：2019-10-17 03:25:32
【问题描述】：

我正在使用 Bootstrap 表来显示一个包含许多不同大小的列的列表。一切都很好，但我的客户要求在列的标题中包含一个输入字段。此字段在填充后将对列执行过滤。

问题是插入输入字段与列宽混淆。因此，由于文本面包线，现在每一行都有更大的高度。

我需要输入字段的权重以遵守列大小，并且列宽保持就好像输入字段不存在一样。

原代码或多或少像：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <title>Test</title>
  </head>
  <body>
   <div container>

   <table class="table table-striped table-hover table-sm small">
        <thead>
            <tr>
                <th>Project </th>
                <th>Line </th>
                <th>Code </th>
                <th>Pay Item </th>
                <th>Code </th>
                <th>Material </th>
                <th>Accept. </th>
                <th>Test </th>
                <th>Status </th>

                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>

                <td>10D276 </td>
                <td>0020 </td>
                <td>203.30 </td>
                <td>EARTH BORROW </td>
                <td>703.02</td>
                <td>Earth Borrow</td>
                <td>Test</td>
                <td>AG-COMP-15</td>
                <td>11</td>               
                <td>
                    <a href="# " class="zoom"><i class="material-icons" title="Show">zoom_in</i></a>    
                    <a href="# " class="zoom"><i class="material-icons" title="Action">directions</i></a>    
                </td>
            </tr>
            <tr>
                <td>10D276 </td>
                <td>0510 </td>
                <td>580.20 </td>
                <td>RAPID SETTING CONCRETE REPAIR MATERIAL WITH COARSE AGGREGATE </td>
                <td>780.04</td>
                <td>Rapid Set Concrete Material with C. Agg</td>
                <td>Appd</td>
                <td>None_1</td>
                <td>4</td>
                <td>
                    <a href="#" class="zoom"><i class="material-icons" title="Show">zoom_in</i></a>   
                    <a href="#" class="zoom"><i class="material-icons" title="Action">directions</i></a>

                </td>
            </tr>

        </tbody>
    </table>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

我刚刚将表格放入表单并将输入字段放入标题中

    <form>
    <table class="table table-striped table-hover table-sm small">
        <thead>
            <tr>
                <th>Project  <input class="form-control form-control-sm" type="text" > </th>
                <th>Line  <input class="form-control form-control-sm" type="text" > </th>
                <th>Code  <input class="form-control form-control-sm" type="text" > </th>
                <th>Pay Item  <input class="form-control form-control-sm" type="text" > </th>
                <th>Code  <input class="form-control form-control-sm" type="text" > </th>
                <th>Material  <input class="form-control form-control-sm" type="text" > </th>
                <th>Accept.  <input class="form-control form-control-sm" type="text" > </th>
                <th>Test  <input class="form-control form-control-sm" type="text" > </th>
                <th>Status  <input class="form-control form-control-sm" type="text" > </th>
                <th>Actions </th>
            </tr>

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

我在这里看到的最佳选择是使用 css 为列设置固定宽度值。

  <thead>
        <tr>
            <th style="width:5%;">Project  <input class="form-control form-control-sm" type="text" > </th>

这会将输入字段缩小到您可自定义的大小。

【讨论】：

谢谢！最好的办法是让 Bootstrap 将字段调整到表格中，而不是相反。我不喜欢在代码中保留修复百分比，但您的解决方案有效。我现在就这样做。