如何在 ActiveAdmin 索引页中自定义表列大小？

Question

我正在尝试自定义我使用 ActiveAdmin 创建的管理部分中的索引页。 我想在 CSS2 中设置每列的大小。

ActiveAdmin 创建一个布局，例如：

<table [...] class="index_table">
  <thead>
    <tr>
      <th class="sortable"><a href="#">Field 1</a></th>
      <th class="sortable"><a href="#">Field 2</a></th>
      <th class="sortable"><a href="#">Field 3</a></th>
      <th class="sortable"><a href="#">Field 4</a></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>value 1</td>
      <td>value 2</td>
      <td>value 3</td>
      <td>value 4</td>
    </tr>
  </tbody>
</table>

我想为每个 部分添加一个类或 id，如：

<table [...] class="index_table">
  <thead>
    <tr>
      <th class="first sortable"><a href="#">Field 1</a></th>
      <th class="second sortable"><a href="#">Field 2</a></th>
      <th class="third sortable"><a href="#">Field 3</a></th>
      <th class="fourth sortable"><a href="#">Field 4</a></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>value 1</td>
      <td>value 2</td>
      <td>value 3</td>
      <td>value 4</td>
    </tr>
  </tbody>
</table>

也许，这不是最好的方法？

任何帮助表示赞赏...

Answer 1

好吧，这是一种方法：

在 active_admin.css.scss 中，您可以添加一些样式来自定义 Headline 模型的索引，例如：

body.admin_headlines table.index_table thead tr th:nth-child(1) {
  width: 100px !important;
}

body.admin_headlines table.index_table thead tr th:nth-child(2) {
  width: 200px !important;
}

等等...