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

我的观点如下：

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

我会从wide标记中删除这些和col类。

你可以这样做第一个：

<td class="wide">

或者你可以为td:first-child

上课

用css使一个表列更宽

1 个答案: