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

Question

我在React Bootstrap表中有FormControl下面的

<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>

它呈现如下

我尝试使用style={{width: "200px"}}将宽度设置为td标签，th标签和FormControl标签，但没有任何效果，请让我知道我在这里缺少什么

Answer 1

您可以尝试添加CSS规则：

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