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中，您可以添加一些样式来自定义标题模型的索引，例如：

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

等等......

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

1 个答案: