Twitter Bootstrap 表列 - 第一个表的列宽比第二个表短

Question

我正在尝试将 .haml 与 Twitter Bootstrap 一起使用来创建两个表。问题是我的第二个表格渲染得很好，但我的第一个表格文本少得多，似乎在页面上无休止地延伸。如何将我的第一个表格列宽设置为小，与第二个表格的宽度不同？我试过：class=> "table table-condensed" 但还是太大了。

%html
  %head
    %link(rel="stylesheet" href="css/bootstrap.css")
    %link(rel="stylesheet" href="css/my.css")
    %title Working Units
  %body
    %p  
    %p These are the units that are updating. 
%table{:class => "table table-bordered"}
  %thead
    %tr 
      %th Job 
      %th Age 
  %tbody
    - @plines.each do |row|
      %tr 
        - row.split(/[-,]/).each do |column|
          %td= column
%p These are the units that are not updating. 
%table{:class => "table table-bordered"}
  %thead
    %tr 
      %th Job 
      %th Age 
      %th Time
  %tbody
    - @mlines.each do |row|
      %tr 
        - row.split(/[-,]/).each do |column|
          %td= column
%a{:href=>"/"} Back to the form

Answer 1

将表格包裹在具有特定宽度的div 中：

:css
    .halfsize {
          width: 50%;
    }
.halfsize
    %table{:class => "table table-bordered"}
      %thead
        %tr 
          %th Job 
          %th Age 
      %tbody
        - @plines.each do |row|
          %tr 
            - row.split(/[-,]/).each do |column|
              %td= column