无法使用 CSS 控制表格宽度答案

【问题标题】：Cannot control table width with CSS无法使用 CSS 控制表格宽度
【发布时间】：2014-10-08 10:44:41
【问题描述】：

我有以下 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 像素）。

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

element {
}

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

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

根本没有引用cabeceraGrid 类！

我做错了什么？

【问题讨论】：

你能在jsFiddle上设置吗
是的，一个小提琴可以很好地解决这个问题。无论如何，在预期中，这可能是表格的显示参数有问题。让我们看看我们是否可以用小提琴找到解决方案。
@dcc 下次我会考虑的（会有下一次，因为我通常在 css 上挣扎很多）。

标签： html css html-table

【解决方案1】：

下面的行不适用于 id 为“j_idt10”的表格，因为它表示 table 元素 inside 元素，样式类为 cabeceraGrid。

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

使用

.cabeceraGrid { width: 100% !important; }

或

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

【讨论】：

【解决方案2】：

element 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; }

【讨论】：

回答已回答的问题。您的答案实际上与接受的答案相同。投反对票