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

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 最好放在样式表中，而不是内联。假设您希望第 2 列为 200px，您必须编写如下内容

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

您可以使用任何其他 CSS 有效长度单位:em , rem , % , vw , vh , vmin , vmax , cm , mm , in , ex , pt或 pc .