テーブルの列幅とテキストラップを修正する方法に関する問題

Question

私はhtmlテーブルを持っています。しかし、私は特定のことを達成したい。私は、定義された列の幅よりも長いテキスト行が自動的に分割され、次の行に折り返されるように、テーブルの列を固定しています。 私のコードは次のとおりです。

<table id="metadata" width="100%" > 


      <tr> 
       <td class="meta-head">GRN #</td> 
    <% if @grn.date.month >= 4 && @grn.date.month <= 12 %> 
    <td> 
    <textarea><%= "GRN"+@warehouse.shortform+"/"+(@grn.date.year.to_s.at(2..3))+"-"+(((@grn.date.year)+1).to_s.at(2..3))+"/"+(@grn.serial.to_s.rjust(5, '0')) %> 
    </textarea> 
    </td> 
    <% else %> 
    <td><textarea><%= "GRN"+@warehouse.shortform+"/"+(((@grn.date.year)-1).to_s.at(2..3))+"-"+(@grn.date.year.to_s.at(2..3))+"/"+(@grn.serial.to_s.rjust(5, '0')) %></textarea></td> 
    <% end %> 

      <td class="meta-head">Vehicle</td> 
      <td><textarea id="date"><%= @grn.vehicle_no %></textarea></td> 
      <td rowspan="3" style="border:none; width: 200px;"> 

     <div id="logo"> 
      <div id="logohelp"> 
       <input id="imageloc" type="text" size="50" value="" /><br> 
       (max width: 540px, max height: 100px) 
      </div> 
     <% if @warehouse.logo != nil %> 
     <%= image_tag(@warehouse.logo, :alt => "logo", id: "image") %><br> 

     <% else %> 
    <% end %> 
    </div> 

      </td> 


      </tr> 

      <tr> 

       <td class="meta-head">GRN Date</td> 
       <td><textarea id="date"><%= @grn.date.strftime("%d/%m/%y") %></textarea></td> 
       <td class="meta-head">Bill #</td> 
       <td><textarea id="date"><%= @grn.bill_no %></textarea></td> 
      </tr> 

      <tr> 

       <td class="meta-head">Challan</td> 
       <td><textarea id="date">No. <%= @grn.challan_no %>, Dt. <%= @grn.challan_date %></textarea></td> 
       <td class="meta-head">Bill Date</td> 
       <td><textarea id="date"><%= @grn.bill_date %></textarea></td> 
      </tr> 

      <tr> 

       <td class="meta-head">PO #</td> 
       <td><textarea id="date"><%= @grnitems[0].purchase_order_item.purchaseorder.serial %></textarea></td> 
       <td class="meta-head">Transporter</td> 
       <td><textarea id="date"><%= @grn.transporter %></textarea></td> 
       <td rowspan="3" style="border:none; width: 10px;white-space: nowrap; text-align: left;"> 
       <% if @warehouse.address1 != nil %> 
       <%= @warehouse.address1 %> <br> 
        <%= @warehouse.address2 %><br> 
        <%= @warehouse.address3 %> <br> 
        <%= @warehouse.address4 %> 

       <% end %> 
       </td> 
      </tr> 
      <tr> 

       <td class="meta-head">Vendor </td> 
       <td><textarea id="date"><%= @grnitems[0].purchase_order_item.purchaseorder.vendor.description %></textarea></td> 
       <td class="meta-head">LR #</td> 
       <td><textarea id="date"><%= @grn.lr_no %></textarea></td> 

      </tr> 

      <tr> 

       <td class="meta-head">Way bill </td> 
       <td><textarea id="date"></textarea></td> 
       <td class="meta-head">LR Date</td> 
       <td><textarea id="date"><%= @grn.lr_date %></textarea></td> 

      </tr> 
       </table> 

Answer 1

あなたがこれを行うには、2つの方法があります。

1. （非推奨）<td width="200px">...</td>か...
2. <td style="width: 200px">...</td>を。

もちろん、CSSはインラインではなくスタイルシートに入れるのが最適です。あなたは2番目の列は200pxのようにしたいと仮定すると、あなたは

tr>td:nth-child(2) { 
    width: 200px; 
} 

のようなものを書く必要があるだろうあなたは、他のCSSの有効な長さの単位を使用することができます：em、rem、%、vw、vh、vmin、vmax、cm、 mm,in,ex,ptまたはpcである。