时间戳

首页 > 解决方案 > 如何在我的样式化 React 组件中为我的 table、tr、th 和 td 元素添加边框？

javascript - 如何在我的样式化 React 组件中为我的 table、tr、th 和 td 元素添加边框？

问题描述

我有一个样式化的组件 div，其中有一个嵌套在该 div 中的 table、tr、th 和 td 元素到目前为止，我可以使用 > table 为表格提供边框，但我不能给其余元素，如 tr 、th 和 td 元素用边框分隔内容，使其更易于阅读。这是我到目前为止的代码。

样式化的组件

const Skill1 = styled.div`
border: 1px solid black;

> table{
    border: 1px solid black;
}

jsx

<Skill1>
  <table>
    <tr>
      <td colSpan="1"><img src={critdmg} /></td>
      <td colSpan="10">Self-Modification EX</td>
    </tr>
    <tr>
      <td colSpan="11">
        Increase critical damage for 3 turns.
        <br />
        Increase critical star absorption for 3 truns.
      </td>
    </tr>
    <tr>
      <th>Level</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
    </tr>
    <tr>
      <th>critical damage+</th>
      <td>20%</td>
      <td>23%</td>
      <td>26%</td>
      <td>29%</td>
      <td>32%</td>
      <td>35%</td>
      <td>38%</td>
      <td>41%</td>
      <td>44%</td>
      <td>50%</td>
    </tr>
    <tr>
      <th>Star absorption+</th>
      <td>400%</td>
      <td>440%</td>
      <td>480%</td>
      <td>520%</td>
      <td>560%</td>
      <td>600%</td>
      <td>640%</td>
      <td>680%</td>
      <td>720%</td>
      <td>800%</td>
    </tr>
    <tr>
      <th>Cooldown Times</th>
      <td colSpan="5">7</td>
      <td colSpan="4">6</td>
      <td>5</td>
    </tr>
  </table>
</Skill1>

我怎么能做到。

标签： javascriptreactjs

解决方案

我想您需要添加 > table, table td {样式组件，以使子标签具有相同的边框样式。

这是你要找的吗？

推荐阅读