reactjs - bootstrap：表内的输入宽度对于所有列都相同，而与列内容无关

Question

我正在 reactjs 中创建一个引导表。该表在每个列标题下方都有一个过滤器。

以下是代码：

<table className="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th onClick={() => this.handleColumnSort("id")}><b>Id</b> <i className={`fa fa-fw ${this.handleColumnSortCss("id")}`}></i></th>
      <th onClick={() => this.handleColumnSort("name")}><b>Name</b> <i className={`fa fa-fw ${this.handleColumnSortCss("name")}`}></i></th>
      <th onClick={() => this.handleColumnSort("munit")}><b>Munit</b> <i className={`fa fa-fw ${this.handleColumnSortCss("munit")}`}></i></th>
      <th onClick={() => this.handleColumnSort("rate")}><b>Rate</b> <i className={`fa fa-fw ${this.handleColumnSortCss("rate")}`}></i></th>
    </tr>
    <tr>
      <th></th>
      <th><input  type="text" onChange={(e) => this.onChangeHandler("id",e)}/></th>
      <th><input  type="text" onChange={(e) => this.onChangeHandler("name",e)}/></th>
      <th><input  type="text" onChange={(e) => this.onChangeHandler("munit",e)}/></th>
      <th><input  type="text" onChange={(e) => this.onChangeHandler("rate",e)}/></th>
    </tr>
  </thead>
  <tbody>
  {this.props.items.filtereditems.map((item,index) => (
    <tr key={index} >
        <th> {(index+1)+((this.props.page_number-1)*(this.props.page_size))}</th>
        <td> {item.id}</td>
        <td> {item.name}</td>
        <td> {item.munit}</td>
        <td> {item.rate}</td>
    </tr>
    ))}
  </tbody>
</table>

输出是：

但是没有输入它看起来好多了，它会自动调整到内容宽度。

那么如何在输入宽度不扩展到最大的情况下实现上述布局。

Answer 1

如果我理解正确，您只需将 Css 样式添加到您的 <input /> 固定宽度或填充。 css box model

Answer 2

您可以通过将名称列设为width: 100% 来实现所需的结果。

名称列可以更宽，这反过来又会使其他列更小，同时尊重流体宽度。

 <table>
  <thead>
    <tr>
      <th>#</th>
      <th>Id</th>
      <th>Name</th>
      <th>Munit</th>
      <th>Rate</th>
    </tr>
    <tr>
      <th></th>
      <th><input type="text" /></th>
      <th><input type="text" /></th>
      <th><input type="text" /></th>
      <th><input type="text" /></th>
    </tr>
  </thead>
  <tbody>
      <td>1</td>
      <td>100</td>
      <td>Name</td>
      <td>100000</td>
      <td>Rate</td>
  </tbody>
</table>

例如，您可以像这样定位名称列：

table th:nth-child(3),
table td:nth-child(3) {
    width: 100%;
}

这还假设以下规则对表格元素有效：

table {
    table-layout: auto;
}

小提琴：https://jsfiddle.net/49fach5w/

正如您提到的，您使用 boostrap，您可以使用以下帮助程序类：

w-100

您可以将此应用于包含“名称”数据的每个表格单元格，例如：

<th class="w-100">...</th>