Question

我有以下HTML（从primefaces获得）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link type="text/css" rel="stylesheet" href="/selene/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" />
    <link type="text/css" rel="stylesheet" href="/selene/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&amp;v=5.0" />
    <link type="text/css" rel="stylesheet" href="/selene/javax.faces.resource/default.css.xhtml?ln=css" />
    <link type="text/css" rel="stylesheet" href="/selene/javax.faces.resource/ePruebas.css.xhtml?ln=css" />
    <script type="text/javascript" src="/selene/javax.faces.resource/validation/validation.js.xhtml?ln=primefaces&amp;v=5.0"></script>
    <script type="text/javascript" src="/selene/javax.faces.resource/validation/beanvalidation.js.xhtml?ln=primefaces&amp;v=5.0"></script>
    <script type="text/javascript">
      PrimeFaces.settings.locale = 'ca_ES';PrimeFaces.settings.validateEmptyFields = true;
      PrimeFaces.settings.considerEmptyStringNull = true;
    </script>
    <title>Título por defecto</title>
  </head>
  <body>
    <div id="cabecera" class="cabeceraDiv">
      <table id="j_idt10" class="ui-panelgrid ui-widget cabeceraGrid" role="grid">
        <tbody>
          <tr class="ui-widget-content" role="row">
            <td role="gridcell" class="ui-panelgrid-cell">Selene</td>
            <td role="gridcell" class="ui-panelgrid-cell">
              <label id="j_idt12" class="ui-outputlabel ui-widget ui-icon ui-icon-triangle-1-s"></label>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="principal">
      BIENVENIDO!
    </div>
  </body>
</html>

和/myApp/resources/css css文件

default.css


div.cabeceraDiv {    宽度：100％;   }

.cabeceraGrid table {    宽度：100％！重要;   }

.cabeceraGrid tr，.cabeceraGrid td {    border-style：none！important;   }
ePruebas.css

.cabeceraGrid td，.cabeceraGrid tr { background-color：＃FF7777; }

我遇到的问题是我想让表（j_idt10）使用div中可用的所有空间（已经是100％）。如您所见，cabeceraGrid是表中定义的类之一，它定义了width:100% !important。尽管如此，我仍然得到一个只有其中项目大小的表（在这种情况下为112 px）。

更重要的是，当我去检查table元素（Firefox 26）时，我得到：

element {
}

.ui-panelgrid {
  border-collapse: collapse;
}

.ui-widget {
  font-family: Arial,sans-serif;
  font-size: 1.1em;
}

根本没有引用cabeceraGrid类！

我做错了什么？

Answer 1

以下行不适用于ID为“j_idt10”的表格，因为它表示{<1}}元素元素，其中样式类为table。< / p>

cabeceraGrid

使用

.cabeceraGrid table{ width: 100% !important; }

或

.cabeceraGrid { width: 100% !important; }

Answer 2

元素cabeceraGrid里面没有表元素，cabeceraGrid就是表格。

您需要在css文件中更改此内容。

default.css

    div.cabeceraDiv { width: 100%; }

    table.cabeceraGrid { width: 100% !important; } //here is the problem

    cabeceraGrid tr, .cabeceraGrid td { border-style: none !important; }

ePruebas.css

    .cabeceraGrid td, .cabeceraGrid tr { background-color: #FF7777; }

无法使用CSS控制表格宽度

2 个答案: