使用 css 使一个表格列更宽答案

【问题标题】：Make one table column wider with css使用 css 使一个表格列更宽
【发布时间】：2015-06-14 06:41:53
【问题描述】：

我尝试按照这篇文章的说明进行操作： 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>

【问题讨论】：

标签： css ruby-on-rails

【解决方案1】：

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

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

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

<td class="wide">

或者你可以为td:first-child开设一个课程

【讨论】：

.wide {width: 300px;}