在 Reactstrap 表中设置固定宽度答案

【问题标题】：Setting fixed th widths in Reactstrap table在 Reactstrap 表中设置固定宽度
【发布时间】：2021-06-13 09:19:30
【问题描述】：

我正在使用 Reactstrap 中的 Table 属性创建一个表。当我创建表格并为第 th 列输入值时，每列的宽度是不同的，有些非常宽，有些则太窄。我可以调整表格标题以使列宽可调整或全部相同吗？

<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: $31.99
            <br />
            Employee + One: $75.66
            <br />
            Employee + Family: $95.02
         </td>
         <td>
            Employee: $71.98
            <br />
            Employee + One: $163.36
            <br />
            Employee + Family: $205.15
         </td>
         <td>
            Employee: $53.32
            <br />
            Employee + One: $122.83
            <br />
            Employee + Family: $154.25
         </td>
      </tr>
   </tbody>
</Table>

【问题讨论】：

标签： javascript html css reactjs reactstrap

【解决方案1】：

根据你对它的混乱程度，有几个选择。

首先，让我指出，表格具有不同大小的列是很自然的，您很少通过均衡它们的宽度来更好地了解它们。话虽如此，这里是如何完成你想要的。

Bootstrap/Reactstap 有classes 用于流行的宽度百分比（例如 25% 50% 等）。因此，如果您知道您的表格总是有 4 列，那么您可以为您的ths 提供适当的类：

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

我从不推荐内联样式，但如果你一心想要完成这件事，你可以走那条路。

【讨论】：