set min width on <td> in a reactstrap Table - css

Question

I have searched for a solution with no avail. I need to set a minimum width on my RESPONSIVE table columns in a Table imported from reactstrap.
This table is always going to have a DYNAMIC amount of columns. I have a select as my <th> and I want to set the to a minimum width so users can obviously read the select options.
Here is my component below
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;
Here are two images. These are what it looks like on mobile or smallest laptop size

Answer 1

Here is the solution. In the TableRow component that is being rendered in the body, you need to add a style prop to the <td>
Note: this must be an object within jsx brackets or else you will get an error.
Here is a copy of the TableRow
const TableRow = ({ data }) => (
<tr className="align-middle">
{data.map((customer, index) => (
<td style={{minWidth: 150}} key={index}>{customer}</td>
))}
</tr>
);
Here was my expected output