在 reactstrap 表中设置 <td> 的最小宽度答案

【问题标题】：set min width on <td> in a reactstrap Table在 reactstrap 表中设置 <td> 的最小宽度
【发布时间】：2022-01-09 06:41:20
【问题描述】：

我一直在寻找解决方案，但无济于事。我需要在从 reactstrap 导入的表中的 RESPONSIVE 表列上设置最小宽度。

此表将始终具有动态数量的列。我有一个选择作为我的<th>，我想将其设置为最小宽度，以便用户可以清楚地阅读选择选项。

下面是我的组件

import React, { Fragment, useState, useContext, useMemo } from 'react';
import { CustomInput,Input, Table} from 'reactstrap';


const TableComponent = ({ register, errors, watch }) => {
  
  const TableRow = ({ data }) => (
    <tr className="align-middle">
      {data.map((customer, index) => (
        <td className="text-nowrap" key={index}>{customer}</td>
      ))}
    </tr>
  );
 
  return (
    <Fragment>   
    <Table responsive bordered striped hover>
      <thead>
        <tr>
          {
            fileContacts.map((contact, index) => ( 
                <th className="bg-primary pr-1 pl-1 pt-2 pb-2" scope="col" key={index}>
                  <Input
                  type="select"
                  className="fs--1"
                  name="selectHeader"
                  id="selectHeader"
                 >
                   <option>First name</option>
                   <option>Last name</option>
                   <option>Email</option>
                 </Input>
                </th>  
          ))}
        </tr>
      </thead>
      <tbody>
        {
        upload.contacts.slice(0, 10).map((customer, index) => (
          <TableRow data={customer} key={index}/>
        ))
        }
      </tbody>
    </Table>
    </Fragment>
  );
};

export default TableComponent;

这里有两张图片。这些是它在移动设备或最小的笔记本电脑上的样子

【问题讨论】：

能否请您也与我们分享视觉输出的图像？

标签： css reactjs reactstrap

【解决方案1】：

这里是解决方案。在body中正在渲染的TableRow组件中，需要在<td>中添加一个style prop

注意：这必须是 jsx 括号内的对象，否则会出错。

这是 TableRow 的副本

const TableRow = ({ data }) => (
    <tr className="align-middle">
      {data.map((customer, index) => (
        <td  style={{minWidth: 150}} key={index}>{customer}</td>
      ))}
    </tr>
  );

这是我的预期输出

【讨论】：