Question

我试图在Twitter Bootstrap中使用.haml来创建两个表。问题是我的第二个表格渲染得很好，但是我的第一个表格，文字少得多，看起来在页面上无休止地延伸。如何将第一个表格列宽设置为较小，宽度与第二个表格的宽度不同？我试过了：class =＆gt; “表格浓缩”，但仍然太大了。

%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

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

1 个答案: