css - 使用 css 使一个表列更宽

Question

我尝试按照这篇文章中的说明进行操作: Table with table-layout: fixed; and how to make one column wider因为我也在尝试使第一列更宽，但由于某种原因它不起作用。我怀疑我的 .wide 类在错误的地方。我正在使用 Ransack gem 生成此表中的搜索结果。

我的 CSS 是这样的:

table#advanced {

  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif {
  width: 100%;
  border-collapse: collapse;
  }


  th, td {
    font-size: 1em;
    border: 1px solid $secondary-text-color;
    padding: 3px 7px 2px 7px;
    }

  th {
    font-size: 1.1em;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: darken($primary-background-color, 30%);  
    } 

  tr.even_line { background-color: $primary-background-color; }
  tr.odd_line { background-color: #FFFFFF; }

  .even_line:hover { color: $secondary-background-color; }
  .odd_line:hover { color: $secondary-background-color; }

  a:link {
    color: #000000;
  }

  a:visited {
    color: #000000;
  }

  a:hover {
    color: $secondary-background-color;
    background-color: transparent;
    font-weight: bold;
  }

  a:active {
    color: #0000FF;
  }
}

我的 View 是这样的:

<table id="advanced">
  <tr>
    <th><%= sort_link @q, :title, "Title" %></th>
    <th><%= sort_link @q, :gender, "Type" %></th>
    <th><%= sort_link @q, :size, "Size" %></th>
    <th><%= sort_link @q, :price, "Price" %></th>
    <th><%= sort_link @q, :condition, "Condition" %></th>
    <th><%= sort_link @q, :material, "Material" %></th>
    <th><%= sort_link @q, :wash, "Wash" %></th>
    <th><%= sort_link @q, :color, "Color" %></th>
    <th><%= sort_link @q, :waist, "Waist" %></th>
    <th><%= sort_link @q, :hips, "Hips" %></th>
    <th><%= sort_link @q, :front_rise, "Front Rise" %></th>
    <th><%= sort_link @q, :inseam, "Inseam" %></th>
    <th><%= sort_link @q, :leg_opening, "Leg Opening" %></th>
  </tr>

  <% @products.each do |product| %>
    <tr class=<%= cycle('even_line', 'odd_line') %>>
      <td><%= link_to(product.title, product) %></td>
      <td><%= product.gender %></td>
      <td><%= product.size %></td>
      <td><%= number_to_currency(product.price) %></td>
      <td><%= product.condition %></td>
      <td><%= product.material %></td>
      <td><%= product.wash %></td>
      <td><%= product.color %></td>
      <td><%= product.waist %></td>
      <td><%= product.hips %></td>
      <td><%= product.front_rise %></td>
      <td><%= product.inseam %></td>
      <td><%= product.leg_opening %></td>
    </tr>
  <% end %>
</table>

Answer 1

您的风格是说每个 th 单元格的宽度为 35%，td 单元格的宽度为 65%。

我将从 col 标签中删除那些和 wide 类。

你可以这样制作你的第一个 td:

<td class="wide">

或者你可以为 td:first-child 创建一个类