如何在React JS中增加td标签中输入字段的宽度

Question

I have below FormControl in react bootstrap table

<Table responsive striped bordered hover>
            <thead>
                <tr>
                    <th>#</th>
                    {Object.keys(tableData[0]).map((header, index) => (
                        <th key={index}>{header} </th>
                    ))}
                </tr>
            </thead>
            <tbody>
                {tableData.map((data, index) => (
                    <tr key={index}>
                        <td>{index + 1}</td>
                        <td>
                            {<FormControl
                                placeholder="Username"
                                aria-label="Username"
                                aria-describedby="basic-addon1"
                                value={data.Date}
                            />}
                        </td>
                        <td>{data['Long/Short']}</td>
                   
                    </tr>
                ))}

            </tbody>
        </Table>
    </Container>

And it renders as below

I have tried setting the width using style={{width: "200px"}} to td tag, th tag and FormControl tag but nothing worked, please let me know what am I missing here

Answer 1

You could try and add a CSS rule:

td input[type='text'] {
min-width: 150px
}