关于如何修复表格列宽和文本换行的问题答案

【问题标题】：Issue regarding how to fix a table column width and text wrap关于如何修复表格列宽和文本换行的问题
【发布时间】：2017-05-08 21:57:18
【问题描述】：

我有一个 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>

【问题讨论】：

标签： html css alignment html-table

【解决方案1】：

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

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

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

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

您可以使用任何其他 CSS 有效长度单位：em、rem、%、vw、vh、vmin、vmax、cm、mm、@ 987654333@、ex、pt 或pc。

【讨论】：