有关如何修复表列宽度和文本换行的问题

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

您有两种方法可以做到这一点：

1. （已弃用）<td width="200px">...</td>或......
2. <td style="width: 200px">...</td>。

当然，CSS最好放在样式表中，而不是内联。假设您希望第二列为200px，则必须编写类似

的内容

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

您可以使用任何其他CSS有效长度单位：em，rem，%，vw，vh，vmin，{ {1}}，vmax，cm，mm，in，ex或pt。