Question

我在一个primefaces面板中有一个html表。我正在使用primefaces面板来实现其折叠功能。

<!DOCTYPE html>
<html lang="en"
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:p="http://primefaces.org/ui">
<h:head>
  <title>demo</title>
</h:head>       
<h:body>
  <h:outputStylesheet library="css" name="demo.css"/>
  <p:panel id="toggleable" header="Panel header" toggleable="true">
  <table style="width:100%">
    <tr>
      <th>Forename</th>
      <th>Surname</th>
      <th>Age</th>
      <th>Country</th>
      <th>City</th>
      <th>Occupation</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith Jones Dunhill</td>
      <td>50</td>
      <td>England</td>
      <td>London</td>
      <td>Deep sea diver</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>Scotland</td>
      <td>Glasgow</td>
      <td>Truck Driver</td>
    </tr>
    </table> 
  </p:panel>
</h:body>            
</html>

使用样式表

th{
  background-color: Yellow;
  border: 1px solid Green;
}
td{
  border: 1px solid blue;
}
.ui-panel .ui-panel-content {
    padding: 0;
}
table{
  overflow-x:scroll;
}

在我缩小浏览器窗口之前，页面看起来不错。然后，桌子溢出面板区域。

我假设我可以在表格中出现一个水平滚动条，一旦它不能再崩溃，但这不起作用。

有谁能告诉我如何处理这个问题？我实际上想在面板上使用jsf数据表，但我想任何解决方案这个更简单的情况仍然适用。

对Randy的回应，据我所知，如果我将该代码粘贴到jsfiddle中，则primefaces组件不会被渲染，因此无法看到问题。我在这里放了一个演示：

primefaces panel

使浏览器窗口变窄，直到表格不再崩溃。桌子现在溢出了面板区域。

我正在使用Firefox 45.0.1

如何让一个表保持在一个表面p：面板内

0 个答案: