我在面板中有一个扩展数据表（我也尝试将它粘贴在一个 div 中）。表格的宽度会扩展以填充父级，而不是父级缩小到内容。
表的代码
<h:body>
<ui:composition template="../main_template.xhtml">
<ui:define name="content">
<h:form>
<div class="table_panel">
<rich:extendedDataTable value="#{user_list.userList}" var="user" filterVar="filterValue" id="table"
sortPriority="#{userListSortingBean.sortPriorities}"
selectionMode="none"
rowClasses="odd_row, even_row">
<rich:column sortBy="#{user.nameFirst}" filterExpression="#{empty filterValue or fn:startsWith(user.nameFirst, filterValue)}">
<f:facet name="header">First Name</f:facet>
<h:outputText value="#{user.nameFirst}" />
</rich:column>
<rich:column sortBy="#{user.nameLast}" filterExpression="#{empty filterValue or fn:startsWith(user.nameLast, filterValue)}">
<f:facet name="header">Last Name</f:facet>
<h:outputText value="#{user.nameLast}" />
</rich:column>
<rich:column sortBy="#{user.email}" filterExpression="#{empty filterValue or fn:startsWith(user.email, filterValue)}">
<f:facet name="header">Email</f:facet>
<h:outputText value="#{user.email}" />
</rich:column>
<rich:column sortBy="#{user.company.name}" filterExpression="#{empty filterValue or fn:startsWith(user.company.name, filterValue)}">
<f:facet name="header">Company</f:facet>
<h:outputText value="#{user.company.name}" />
</rich:column>
<rich:column sortBy="#{user.company.activeFlag}" filterExpression="#{empty filterValue or fn:startsWith(user.company.activeFlag, filterValue)}">
<f:facet name="header">Company Active Status</f:facet>
<h:outputText value="#{user.company.activeFlag}" />
</rich:column>
<rich:column sortBy="#{user.company.expirationDate}" filterExpression="#{empty filterValue or fn:startsWith(user.company.expirationDate, filterValue)}">
<f:facet name="header">Expiration Date</f:facet>
<h:outputText value="#{user.company.expirationDate}" />
</rich:column>
</rich:extendedDataTable>
<rich:messages />
</div>
</h:form>
</ui:define>
</ui:composition>
相关的CSS
#main_content .table_panel {
background-color: #BED6F8;
color: #0066cc;
border-width: 3px;
}
#main_content .rf-edt {
border: none;
}
#main_content .rf-edt-ftr {
border: none;
}
.even_row {
background-color: #ECF3FE;
}
.odd_row {
background-color: #FCFFFE;
}
我打算发布结果的图片，但没有声誉。发生了什么即使表中的数据只需要大约 50% 的空间，我的包装器 div 是否已被表填充。我只需要表格缩小到它的内容。