为什么这个 inner HTML table 的宽度是由它的内容决定的？如何设置其容器的宽度？

Question

我不太喜欢 HTML 和 CSS，我遇到了以下问题。我有以下 CSS 结构：

<!-- REFERENTE TECNICO: -->
<div id="referenteTecnicoTab">
  <table width="800px" class="standard-table-cls table-header-cls">
    <thead class="opening">
      <tr>
        <th>
          <img class="imgAccordion" src="img/arrow.gif"/>
          Ricerca Fatture
        </th>
      </tr>
    </thead>

    <tbody class="expanded" style="display: none;">
      <tr>
        <td>
          <div id="ricercaFattureContent" class="accordion-pane-content">

            <table width="100%" class="standard-table-cls table-header-cls" >
              <thead>
                <tr>
                  <th style="text-align: center; border-left: 0">Ricerca Fatture</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td width="100%">
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

</div>

正如您在 div 中看到的 id=ricercaFattureContent 我有一个 table 包含一个 thead 显示 Ricerca Fatture 文本和 tbody 显示 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 示例文本。

问题在于此 table 具有内部文本的宽度（在本例中为 aaa....aaa 文本）。

我该怎么做才能使这个 table 与其容器具有相同的宽度？

我快要疯了，使用 FireBug 似乎是 tbody 里面的 tr其宽度由其内容决定，上一段代码的这一部分：

<table class="standard-table-cls table-header-cls" width="100%">
  <thead class="opening active">
  <tbody class="expanded" style="display: block;">
    <tr>
      THE tr TAKE THE WIDTH OF ITS CONTENT

所以我得到了这样的东西：

我希望 table 具有其容器的宽度，我该怎么做？

Tnx

Answer 1

您好，您似乎有一个 width="800px" 作为 table 元素的属性，您还将 tbody 设置为 display: none;

这里是 fiddle 修复： http://jsfiddle.net/ak0ygz2n/

请注意，我将容器涂成橙色以显示概念，并将 table 宽度设置为容器的 100%。

为什么这个 inner HTML table 的宽度是由它的内容决定的？如何设置其容器的宽度？

Why this inner HTML table have the width determined by its content? How can I set to the width of its container?

html

css

xhtml

layout

html-table