在 Reactstrap 中设置固定宽度 table

Question

我正在使用 Reactstrap 中的 Table 属性创建一个 table。当我创建 table 并为第 th 列输入值时，每列的宽度都不同，有些非常宽，有些则太窄。我可以调整 table headers 以便列宽调整 table 或所有相同的宽度吗？

<Table hover className="text-sm">
   <thead>
      <tr>
         <th>Features</th>
         <th>HDHP</th>
         <th>PPO 15</th>
         <th>PPO 20</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th scope="row">Plan Design</th>
         <td>
            Deductible-based plan. 100% covered (excluding
            prescription Drug copays) once deductible is
            met.
         </td>
         <td>Copay-based plan without a deductible.</td>
         <td>
            Copay-based plan without a deductible, with
            lower premiums than the PPO 15 but higher
            out-of-network costs.
         </td>
      </tr>
      <tr>
         <th scope="row">Premium (Bi-Weekly)</th>
         <td>
            Employee: .99
            <br />
            Employee + One: .66
            <br />
            Employee + Family: .02
         </td>
         <td>
            Employee: .98
            <br />
            Employee + One: 3.36
            <br />
            Employee + Family: 5.15
         </td>
         <td>
            Employee: .32
            <br />
            Employee + One: 2.83
            <br />
            Employee + Family: 4.25
         </td>
      </tr>
   </tbody>
</Table>

Answer 1

根据您能接受的混乱程度，有几种选择。

首先，让我指出，tables 具有不同大小的列是很自然的，您很难通过使它们的宽度相等来更好地查看它们。话虽如此，这里是如何完成你想要的。

Bootstrap/Reactstap 有 classes 用于流行的宽度百分比（例如 25% 50% 等）。因此，如果您知道 table 将始终有 4 列，例如，您可以为 th 提供适当的类:

<tr>
   <th className={"w-25"}>Features</th>
   <th className={"w-25"}>HDHP</th>
   <th className={"w-25"}>PPO 15</th>
   <th className={"w-25"}>PPO 20</th>
</tr>

您可以简单地对任意数量的列使用 JSX 的内联样式。所以这里是如何平衡 3 列的宽度：

<tr>
    <th style={{width: "33%"}}>Features</th>
    <th style={{width: "33%"}}>HDHP</th>
    <th style={{width: "33%"}}>PPO 15</th>
</tr>

我从不推荐内联样式，但如果你执意要做到这一点，你可以走那条路。

在 Reactstrap 中设置固定宽度 table

Setting fixed th widths in Reactstrap table

html

javascript

css

reactjs

reactstrap