我正在使用haml作为视图语法来进行angularJS和rails项目,我有一个包含一些数据的表,如果数据很大2列: Prestation Tps 不能正确显示屏幕截图描述:
此处是查看代码:
.directive-specifications-table
.row.specifications-export
%a.btn.btn-green.pull-right{ ng: { href: "/specifications/{{ contractPeriod.id }}/export?format=xls", if: "displayOptions.displayMode != 'schedules' && contractPeriod.hasSpecifications()" }}
%i.fa.fa-cloud-download
{{ 'btn.export_to_xls' | translate }}
.row
%table.table.table-condensed.table-striped{ ng: { if: "contractPeriod.hasSpecifications()", class: "{'table-hover': displayOptions.selectionMode }" }}
%thead
%tr
%th.button-select{ ng_if: "displayOptions.selectionMode === 'multi'" }
%multi_checker{ ng_if: "specificationTemplates", items: "specificationTemplates", selected: "selectedSpecificationTpl" }
%th.small{ ng_if: "displayOptions.showIconOpenModalSpecification" }
/ ---
%th.medium{ ng_if: "displayOptions.displayMode === 'schedules'"}
%span{ ng_if: 'optionalFields.showQuantityModel', translate: 'specifications_table.shortened.quantity_model' }
%span{ ng_if: 'optionalFields.showQuantityModel' }
\/
%span{ translate: 'specifications_table.shortened.quantity' }
%th.large{ translate: 'specifications_table.specification_template' }
%th.medium{ translate: 'specifications_table.shortened.unit_time', ng_if: "displayOptions.displayMode === 'schedules'" }
%th.medium{ translate: 'specifications_table.shortened.technicians_count', ng_if: "displayOptions.displayMode === 'schedules'" }
%th.medium{ translate: 'specifications_table.shortened.specification_time' }
/ ---
%th.small{ ng_repeat: "month in monthsInContractDateRange track by $index" }
{{ month.shortname[0] | uppercase }}
/ ---
%th.medium{ ng_if: 'displayOptions.showTotalDuration', translate: 'specifications_table.shortened.total_time' }
%th.medium{ ng_if: "displayOptions.displayMode === 'balance'",
translate: 'specifications_table.shortened.balance' }
%th.medium{ ng_if: "displayOptions.displayMode === 'follow-up'",
translate: 'specifications_table.shortened.total' }
%th.medium{ ng_if: "displayOptions.displayMode != 'schedules'",
translate: 'specifications_table.shortened.remaining_duration' }
%tbody
%tr.specification-row{ ng: { repeat: "specificationTpl in specificationTemplates track by specificationTpl.id",
class: "{ 'selected': selectedSpecificationTpl[ specificationTpl.id ] }",
click: "selectSpecification( specificationTpl.object) "}}
%td{ ng_if: "displayOptions.selectionMode === 'multi'" }
%input{ type: 'checkbox', ng: { checked: "selectedSpecificationTpl[ specificationTpl.id ]" }}
%td.pointer{ ng: { click: "showSpecification( $event, specificationTpl.object )", if: "displayOptions.showIconOpenModalSpecification" } }
%i.fa.fa-eye
/ ---
%td{ ng: { if: "displayOptions.displayMode === 'schedules'", class: '{ danger: optionalFields.showQuantityModel && specificationTpl.object.getQuantityModel() < specificationTpl.object.getQuantity(),
success: optionalFields.showQuantityModel && specificationTpl.object.getQuantityModel() === specificationTpl.object.getQuantity() }' }}
%span{ ng_if: 'optionalFields.showQuantityModel' }
{{ ( specificationTpl.object.getQuantityModel() | removeZero: '-' ) + " / " }}
{{ specificationTpl.object.getQuantity() | removeZero: '-' }}
%td
.specification-name{ popover: "{{ specificationTpl.name }}", popover_trigger: "mouseenter",
popover_popup_delay: 1000,
popover_animation: true,
popover_placement: "top" }
{{ specificationTpl.name }}
%td{ ng_if: "displayOptions.displayMode === 'schedules'" }
{{ specificationTpl.unitDuration || '-' }}
%td{ ng_if: "displayOptions.displayMode === 'schedules'" }
{{ specificationTpl.techniciansCount | removeZero: '-' }}
%td.separator
{{ specificationTpl.duration || '-' }}
/ ---
%td{ ng: { repeat: 'value in specificationTpl.monthValues track by $index',
class: "{ separator: $last }" }}
%specifications_table_month_value{ display_mode: 'displayOptions.displayMode',
value: 'value',
executed: 'value.executed.count',
scheduled: 'value.scheduled.count' }
/ ---
%td{ ng_if: 'displayOptions.showTotalDuration' }
{{ specificationTpl.totalDuration || '-' }}
%td{ ng_if: "displayOptions.displayMode != 'schedules'" }
%specifications_table_month_total_value{ display_mode: 'displayOptions.displayMode', specification_tpl: 'specificationTpl' }
%td{ng_if: "displayOptions.displayMode != 'schedules'" }
{{ specificationTpl.remainingDuration }}
%tr.summary{ ng_if: "displayOptions.showSummary" }
%td.separator{ colspan: '{{ displayOptions.summaryColspan }}' , translate: 'specifications_table.planned_interventions' }
%td{ ng_repeat: "interventionsCount in interventionsSummary() track by $index" }
{{ interventionsCount | removeZero }}
我想为列设置固定宽度:tps,水平升降机可以查询整个表格。