how to modify the width of search container column text?

Question

how to modify the width of search container column text?

I want to change the width of the <th> table.

I used the attribute cssClass of <liferay-ui:search-container-column-text> liferay taglib but I did not work for me.

Table header:

table

view.jsp:

    <liferay-ui:search-container orderByCol="<%=sortByCol%>"
     orderByType="<%=sortByType%>" iteratorURL="<%=url%>"
     delta="10" emptyResultsMessage="no-result">
    <liferay-ui:search-container-results>
      <% //some code %>
    </liferay-ui:search-container-results>
    <liferay-ui:search-container-row modelVar="file"
                            className="DLFileEntry">
        <liferay-ui:search-container-column-text name="Val1"
                                    cssClass="txt-capitalize width-11" value="<%=value1%>" />
        <liferay-ui:search-container-column-text name="Val2"
                                    cssClass="txt-capitalize width-11" value="<%=value2%>" />
        <liferay-ui:search-container-column-text name="Val3"
                                    cssClass="txt-capitalize width-11" value="<%=value3%>" />
        <liferay-ui:search-container-column-text name="Value4"
                                    cssClass="txt-capitalize width-11" value="<%=value4%>" />
        <liferay-ui:search-container-column-text name="Val5"
                                    cssClass="txt-capitalize width-11" value="<%=value5%>" />
<!-- some other search-container-column-text -->
    </liferay-ui:search-container-row>
    <liferay-ui:search-iterator
        searchContainer="<%= searchContainer %>"
        paginate="${fn:length(listFiles) ge 10}" />
    </liferay-ui:search-container>

main.css:

.width-11{
    width:11%;
    padding-left: 5px;
    padding-right: 0;

}

Update

If I inspect the code in the browser we can see the css class that exist.

inspect table row

Answer 1

You need to distribute width % properly so that it aggregate to 100%;

width: 11% would be only 55% (as there are 5 column in your table) and remaing 45% will be evenly distributed.