Need help decreasing width of table

I'm trying to decrease the width of this table because it's 开发者_如何转开发way too wide.

I added this: style="width: 70%; to the table tag but it does not seem to work.

 <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" %>

Using a pixel value attribute in table columns should force the text to wrap (if there's at least one space in it). Use style="width: 100px" and set the amount to whatever you need. Alternatively, set this attribute to the column's class name in CSS if you're able to.

The issue you most likely have is that the <td>s, somewhere (in a CSS file, or in the document), have a fixed width. If that's the case, changing the <table> width won't do anything unless you have some other special styles on it.

For a responsive table width, I'd suggest adding a percentage-based width to both the <table> and the <td> elements. You would do this in your CSS file.

I suspect it's just expanding to fit its contents.

As a fix, you might set a fixed width for columns such as "Work Type" that could get too wide.