如何解决表中的第一行问题

Question

我有一个tr th行，它没有正确显示，因为我有一个div，其中包含了后面的数据行。现在，由于表中的div，表标题看起来如下所示。这都是在一个反应组件内。

​

​

以下是代码：

        <table>
            <tbody>
              <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
                <th>E</th>
                <th>F</th>
              </tr>
             { list.map((a, index) => {
             return( 
             <div className="coinrow"  onClick={goToPage}>
                <tr key={a} className="styledtr">
                    <td rowspan="2">A</td>
                    <td rowspan="2">A</td>
                    <td>A</td>
                    <td>A</td>
                    <td>A</td>
                    <td style={{width: 150}}>
                        A
                        <Sparklines data={volchart}>
                            <SparklinesLine color="blue" />
                        </Sparklines>
                    </td>

                    <td style={{width: 150}}>
                        A
                        <Sparklines data={chart}>
                            <SparklinesLine color="blue" />
                        </Sparklines>
                    </td>
                </tr>
                <tr key={a} className="styledtr">
                    <td>A</td>
                    <td>A</td>
                    <td>A</td>
                    <td style={{width: 150}}>
                        A
                        <Sparklines data={freqs}>
                            <SparklinesLine color="blue" />
                        </Sparklines>
                    </td>
                </tr>
            </div>
            )
        })}
          </tbody>
        </table>

第一个元素在很远的左边对齐。我试着手动改变宽度，但这不起作用。如何解决此格式问题？

Answer 1

您可以使用style="width:150px"，也可以直接使用该属性，而不是提供内部样式标记。就像这个width="150px"一样，您也没有使用任何vw、vh或px的宽度号，这就是为什么它没有在rest上应用。