OVZBEo

index.html

%div.container
  <!-- report info -->
  %table.table.table-bordered#reportHeader
    %th.text-right{:COLSPAN => "4"}
      %span 年
      %span 月
      %span 日      
    %tr
      %th{:COLSPAN => "1"} エリア
      %td{:COLSPAN => "1"} 
        %input{:type => "text"}
      %th{:COLSPAN => "1"} ストア
      %td{:COLSPAN => "1"}
        %input{:type => "text"}
    %tr
      %th{:COLSPAN => 1} 報告者
      %td{:COLSPAN => 3}
        %input{:type => "text"}
  <!-- main content -->
  %table.table.table-bordered.table-hover#reportBody
    %th{:COLSPAN=>4}
      %h3.text-center クレーム・事故・ニアミス報告書
    %tbody.table
      / 基本資料
      %tr
        %th.title{:COLSPAN=>1} 種別①
        %td{:COLSPAN => 3}
          %label
            %input{:type => "checkbox"}
            クレーム          
          %label
            %input{:type => "checkbox"}
            事故          
          %label
            %input{:type => "checkbox"}
            ニアミス
      %tr
        %th.title{:COLSPAN=>1} 種別②
        %td{ :COLSPAN =>3}
          %label
            %input{:type => "checkbox"}
            接客・応対
          %label
            %input{:type => "checkbox"}
            洗車機
          %label
            %input{:type => "checkbox"}
            フィールド全般    
          %label
            %input{:type => "checkbox"}
            ＰＯＳ
          %label
            %input{:type => "checkbox"}
            金銭関係
          %label{:for => ""}
            %input{:type => "checkbox"}
            その他
      %tr
        %th.title{ :COLSPAN => 1} 発生日
        %td{ :COLSPAN => 3}
          %input{:type => "text"}
      %tr
        %th.title{ :COLSPAN => 1 } 発生場所
        %td{ :COLSPAN => 3 }
          %input{:type => "text"}
      %tr
        %th.title{ :COLSPAN => 1 } スタッフ配置
        %td{ :COLSPAN => 3 }
          %input{:type => "text"}
      / 狀況
      %tr
        %th.title{ :COLSPAN => 4 } 状況      
      %tr
        %td{ :COLSPAN => 4 }
          %textarea{:name => "", :cols => "30", :rows => "6"}
      / 原因 改善點
      %tr
        %th.title{ :COLSPAN => 4 } 原因 ・ 改善点        
      %tr
        %td{ :COLSPAN => 4 }
          %textarea{:name => "", :cols => "30", :rows => "4"}
      / 損害狀況
      %tr
        %th.title{ :COLSPAN => 1 } 損害状況
        %td{ :COLSPAN => 3 }          
          保険対応の
          %label
            %input{:type => "radio", :name => "insurance"}
            可       
          %label
            %input{:type => "radio", :name => "insurance"}
            否                  
          （ＳＳ保険　・　洗車機保険　・　お客様の保険　・　その他）          
      %tr
        %td{ :COLSPAN => 4 }
          %textarea{:name => "", :cols => "30", :rows => "4"}
      / お客様情報
      %tr
        %th.title{ :COLSPAN => 4 } 
          お客様情報 
          %br/
          %span.alert 
            ※個人情報ですので慎重に扱いましょう。 （別途最低限必要な詳細情報は店舗で管理して下さい）
      / 其他資料
      %tr
        %th.title{ :COLSPAN => 1 } 男女別
        %td{ :COLSPAN => 1 }        
          %label
            %input{:type => "radio", :name => "sex", :value => "male"}
            男
          %label
            %input{:type => "radio", :name => "sex", :value => "female"}
            女  
        %th.title{ :COLSPAN => 1 } 推定年齢
        %td{ :COLSPAN => 1 }
          %input{:type => "text"}
      %tr
        %th.title{ :COLSPAN => 1 } その他情報
        %td{ :COLSPAN => 3}
          %textarea{:name => "", :cols => "30", :rows => "2"}
      %tr
        %th.title{ :COLSPAN => 1 } 車種
        %td{ :COLSPAN => 1 }
          %input{:type => "text"}
        %th.title{ :COLSPAN => 1 } 色 
        %td{ :COLSPAN => 1 }
          %input{:type => "text"}
      %tr
        %th.title{ :COLSPAN => 1 } ナンバー
        %td{ :COLSPAN => 3 } 
          %span 必要な場合のみ：
          %input{:type => "text"}

OVZBEo.markdown

OVZBEo

A Pen by JohnsonChung on CodePen.

License.

style.css

.container {
  max-width: 760px;
}
tbody{  
  textarea, input {
    width: 100%;
  }
}
span.alert { 
  color: red;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />