如何在bootstrap中的表格单元格上获得一些填充？

Question

我将CSS bootstrap添加到rails4应用程序中。这似乎已将表格单元格上的填充设置为0，使文本嵌入边框。当我尝试添加一些边框间距时，单元格内的文本被包裹而不是表格增长以容纳文本。这是我正在努力解决的问题：

就代码而言，这里是使用引导类生成HTML的HAML。

%table.table-striped.table-bordered
  %thead
    %tr.header
      %th Date
      %th Name
      %th Reading
      %th Reader
      %th Comments
  %tbody
    - @readings.each do |reading|
      %tr
        %td= reading.date
        %td= reading.name
        %td= reading.reading
        %td= reading.reader.nil? ? '(unassigned)' : reading.reader.name
        %td= reading.comments
        %td= link_to 'Show', reading_path(reading)
        %td= link_to 'Edit', edit_reading_path(reading)

根据Chrome的“检查元素”，有人提出了

media="all"
td, th {
    padding: 0;
}

进入我的application.css，但是在我的源中无处可去，所以我认为它必须归结为：

@import "bootstrap-sprockets";
@import "bootstrap";

Answer 1

你可以添加一些CSS ......

#verses td {
  .padding: 15px;
}

在你的html.haml中，我喜欢在表中添加一个id，这样就不会影响所有表（除非你想要）。

%table.table-striped.table-bordered#verses

似乎有另一个css类覆盖引导程序填充，因为默认值不是0.如果你需要另一个破坏填充的css并且这不起作用，你可以使用!important它应该工作

#verses td {
  .padding: 15px !important;
}