需要帮助减少表的宽度

Question

我正在尝试减小此表的宽度，因为它太宽了。

我将这个：style="width: 70%;添加到表格标签中，但它似乎无效。

 <table align="center" class="data_table vert_scroll_table" style="width: 70%;">

     <ctl:vertScroll height="300" headerStyleClass="data_table_scroll"   bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
   <ctl:sortableTblHdrSetup topTotal="false" href="process.like_item_search"/>
<table align="center" class="data_table vert_scroll_table" style="width: 70%;">
    <tr>
        <ctl:sortableTblHdr title="MWSLIN" property="mwslin" type="top">MWSLIN</ctl:sortableTblHdr>
        <ctl:sortableTblHdr title="SOR" property="sorCode" type="top">SOR</ctl:sortableTblHdr>
        <ctl:sortableTblHdr title="Fiscal Year" property="fiscalYear" type="top">Fiscal<br/>Year</ctl:sortableTblHdr>
        <ctl:sortableTblHdr title="Workload Year" property="workloadYear" type="top">Workload<br/>Year</ctl:sortableTblHdr>
        <ctl:sortableTblHdr title="SAC" property="sac" type="top">SAC</ctl:sortableTblHdr>
        <ctl:sortableTblHdr title="TAMCN" property="tamcn" type="top">TAMCN</ctl:sortableTblHdr>
        <ctl:sortableTblHdr title="NSN" property="nsn" type="top">NSN</ctl:sortableTblHdr>
        <ctl:sortableTblHdr title="WORKTYPE" property="workTypeId" type="top">Work Type</ctl:sortableTblHdr>
        <ctl:sortableTblHdr title="NOMENCLATURE" property="nom" type="top">Nomenclature</ctl:sortableTblHdr>
        <ctl:sortableTblHdr title="SUP" property="sup" type="top">Sup</ctl:sortableTblHdr>
        <th class="narrow">Actions</th>
   </tr>

    <c:forEach var="bean" items="${likeItems}">

        <tr>
            <td class="center">${bean.mwslin}</td>
            <td class="center">${bean.sorCode.shortName}</td>
            <td class="center">${bean.fiscalYear}</td>
            <td class="center">${bean.workloadYear}</td>
            <td class="center">${bean.sac}&nbsp;</td>
            <td class="center">${bean.tamcn}&nbsp;</td>
            <td class="center"><ctl:stringFormat format="@@@@-@@-@@@-@@@@">${bean.nsn}</ctl:stringFormat>&nbsp;</td>
            <td class="center">${bean.workTypeId.description}&nbsp;</td>
            <td class="center">${bean.nom}&nbsp;</td>
            <td class="center"><fmt:formatNumber type="currency" value="${bean.sup}"/>&nbsp;</td>
            <td>
            <a class="view" href="blah"><img class="edit" src="../images/icon_view.gif" border="0" alt="View"/></a>
            </td>


       </tr>
    </c:forEach>
</table>
 </ctl:vertScroll>


</c:when>
<c:otherwise>
<c:set var="no_results_msg" scope="page" value="There are no results that match your search criteria." />
  <%@ include file="../../include/search-no-results.html" %>
</c:otherwise>
</c:choose>

<%@ include file="../../include/footer.html" %>

Answer 1

在表列中使用像素值属性应强制文本换行（如果其中至少有一个空格）。使用style="width: 100px"并将金额设置为您需要的金额。或者，如果你能够在CSS中将此属性设置为列的类名。

Answer 2

您最有可能遇到的问题是<td>，某处（在CSS文件中或在文档中）具有固定宽度。如果是这种情况，更改<table>宽度将无法执行任何操作，除非您有其他特殊样式。

对于响应表格宽度，我建议为<table>和<td>元素添加基于百分比的宽度。您可以在CSS文件中执行此操作。

Answer 3

我怀疑它只是扩展以适应其内容。

作为修复，您可以为“工作类型”等列设置固定宽度，这可能会过宽。