html - 无法使用CSS控制表格宽度

我有以下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表{
   宽度：100％！重要;
  }

  .cabeceraGrid tr，.cabeceraGrid td {
   边框样式：无！重要；
  }

ePruebas.css

  .cabeceraGrid td，.cabeceraGrid tr {
    背景颜色：＃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类！

我究竟做错了什么？

最佳答案

下一行不适用于ID为'j_idt10'的表，因为它表示样式类为table的元素中的cabeceraGrid个元素。

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

采用

.cabeceraGrid { width: 100% !important; }

要么

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

关于html - 无法使用CSS控制表格宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26254992/