当前位置：文江博客话题详情

管理检索到的数据表列

发布于 2024-11-07 12:53:05 字数 126 浏览 0 评论 0原文

我的表中有 13 列。当我将其显示在中时，它会扩展到页面上非常宽的区域。

有什么方法可以最小化它们的宽度或显示上面的一些列和下面的一些列？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痞味浪人 2024-11-14 12:53:05

您可以使用h:dataTable的columnClasses属性来设置列的宽度。

来自 Java EE 教程：

如果是列类或行类
指定不止一种样式，
样式应用于列或
按样式的顺序排列的行
属性中列出。例如，
如果columnClasses指定样式
列表列中心和
list-column-right 并且如果表有
两列，第一列将
具有 list-column-center 样式，并且
第二列将有样式
列表列右侧。

您可以定义不同宽度的样式并将这些样式分配给您的列。这是一个示例：

<h:dataTable id="items"
    columnClasses="list-column-center, list-column-left,
         list-column-right, list-column-center">
  ...
</h:dataTable>

在您的 css 文件中：

.list-column-center{ width: 300px; }
.list-column-left{ width: 100px; }

如果您想在行中显示列，您可以在 panelGrid 中使用例如两个数据表：

<h:panelGrid columns="1">
  <h:dataTable value=#{myBean.myTable} var="item">
    <h:column>#{item.column1}</h:column>
    ...
  </h:dataTable>
  <h:dataTable value=#{myBean.myTable} var="item">
    <h:column>#{item.column2}</h:column>
    ...
  </h:dataTable>
</h:panelGrid>

You can use h:dataTable's columnClasses attribute to set width of columns.

From the Java EE tutorial:

If columnClasses or rowClasses
specifies more than one style, the
styles are applied to the columns or
rows in the order that the styles are
listed in the attribute. For example,
if columnClasses specifies styles
list-column-center and
list-column-right and if the table has
two columns, the first column will
have style list-column-center, and the
second column will have style
list-column-right.

You can define styles for different widths and assign these styles to your columns. Here is an example:

<h:dataTable id="items"
    columnClasses="list-column-center, list-column-left,
         list-column-right, list-column-center">
  ...
</h:dataTable>

And in your css file:

.list-column-center{ width: 300px; }
.list-column-left{ width: 100px; }

If you want to display columns in rows you can use for example two datatables in a panelGrid:

<h:panelGrid columns="1">
  <h:dataTable value=#{myBean.myTable} var="item">
    <h:column>#{item.column1}</h:column>
    ...
  </h:dataTable>
  <h:dataTable value=#{myBean.myTable} var="item">
    <h:column>#{item.column2}</h:column>
    ...
  </h:dataTable>
</h:panelGrid>

回复收藏 0 原文

~没有更多了~