Issue regarding how to fix a table column width and text wrap

Question

I have a html table. But I want to achieve a particular thing. I want to set the width of one of my table column fixed so that any text line whose length is greater than the defined column width will be automatically broken up and wrapped in next line. My code is:

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


            <tr>
                <td class="meta-head">GRN #</td>
  <% if @grn.date.month >= 4 && @grn.date.month <= 12 %>
    <td>
    <textarea><%= "GRN"[email protected]+"/"+(@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"[email protected]+"/"+(((@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

You have two ways to do this:

1. (deprecated) <td width="200px">...</td> or ...
2. <td style="width: 200px">...</td>.

Of course, CSS is best put in a stylesheet, rather than inline. Assuming you want the 2nd column to be 200px you'd have to write something like

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

You can use any other CSS valid length unit: em, rem, %, vw, vh, vmin, vmax, cm, mm, in, ex, pt or pc.