css - 如何在 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>

我想为每个 <th> 添加一个类或一个 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;
}

等等...