如何在 HTML 中创建 2x2 表格网格答案

【问题标题】：How to create 2x2 grid of tables in HTML如何在 HTML 中创建 2x2 表格网格
【发布时间】：2014-02-09 17:44:04
【问题描述】：

我正在尝试在 HTML 中创建一个 2x2 表格网格，其中每个表格都是可独立折叠的。我似乎无法找到合适的解决方案。例如，下面的版本有些工作，但不幸的是，当 R1C1 表被隐藏时，第 2 行表与第一行连接。

<!DOCTYPE html>
<!-- Attempt at a 2x2 grid of tables, each independently collapsible
Based on following web pages (among others):
- http://www.delphifaq.com/faq/javascript/f1030.shtml
- http://www.w3schools.com/css/css_table.asp
-->
<html>
  <head>
    <title>2x2 table grid</title>

    <style>
      table, th, td
      {
      border-collapse:collapse;
      border:1px solid black;
      width=50%
      }
    </style>


    <script language="JavaScript" type="text/javascript">
    function setDivStyle(table, style) {
        // Set the display style
            var tbl = document.getElementById(table);
            tbl.style.display = style;
        console.log(table + " display style set to " + style)
          }
    </script> 

  </head>

  <body>

    <div id="r1">
      <h2>Row 1</h2>

      <div id="r1-controls">
    <a id="r1c1-hide" href="javascript:setDivStyle('r1c1', 'none')">Hide R1C1</a> 
    &nbsp;
    <a id="r1c2-show" href="javascript:setDivStyle('r1c1', 'inline')">Expand R1C1</a>
    &nbsp;
    <a id="r1c2-hide" href="javascript:setDivStyle('r1c2', 'none')">Hide R1C2</a> 
    &nbsp;
    <a id="r1c2-show" href="javascript:setDivStyle('r1c2', 'inline')">Expand R1C2</a>
    <br>
      </div>

      <table id="r1c1" style="display: inline; float: left">
    <tr>
      <th>R1C1a</th>
      <th>R1C1b</th>
      <th>R1C1c</th>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </tr>
      </table>

      <table id="r1c2" style="display: block; float: none">
    <tr>
      <th>R1C2a</th>
      <th>R1C2b</th>
      <th>R1C1c</th>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </tr>
      </table>
    </div>

    <div id="r2">
      <h2>Row 2</h2>

      <div id="r2-controls">
    <a id="r2c1-hide" href="javascript:setDivStyle('r2c1', 'none')">Hide R2C1</a> 
    &nbsp;
    <a id="r2c1-show" href="javascript:setDivStyle('r2c1', 'inline')">Expand R2C1</a>
    &nbsp;
    <a id="r2c2-hide" href="javascript:setDivStyle('r2c2', 'none')">Hide R2C2</a> 
    &nbsp;
    <a id="r2c2-show" href="javascript:setDivStyle('r2c2', 'inline')">Expand R2C2</a>
    <br>
      </div>

      <table id="r2c1" style="display: inline; float: left">
    <tr>
      <th>R2C1a</th>
      <th>R2C1b</th>
      <th>R2C1c</th>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </tr>
      </table>

      <table id="r2c2" style="display: block; float: none">
    <tr>
      <th>R2C2a</th>
      <th>R2C2b</th>
      <th>R2C1c</th>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </tr>
      </table>
    </div>


  </body>
</html>

【问题讨论】：

为什么你的一些表是inline，而另一些是block？选择一个（可能是block），然后坚持下去。也不要使用内联样式，或者用javascript设置样式，用CSS设置你的样式，用javascript切换类。
谢谢，内联/块的使用是混淆和不一致编辑的结合。（我将研究为此定义类。）
我没有将其添加为答案，但我在这里为您创建了一个 jsFiddle：jsfiddle.net/Bx8Un。这演示了使用切换类而不是手动设置样式并将 javascript 放入 HTML（通常是不好的做法）。我使用 jQuery 来绑定事件，因为我发现它比纯 JS 更简单、更整洁。
谢谢，这太棒了！

标签： javascript html css html-table

【解决方案1】：

我以前也遇到过类似的问题。当 R1C2 被隐藏时，它的 float:left 导致第 2 行向上移动。我建议创建另一个函数，当您像这样隐藏 R1C2 时将切换 float:left：

function setFloat(element, style) {
    var el = document.getElementById(element);
    el .style.float = style;
    console.log(element + " float style set to " + style)
}

并调用它：javascript:setDivStyle('r1c2', 'none');setFloat('r1c1','none');

【讨论】：

你甚至不需要这样做，你只需将clear: both 应用到下面的 h2 元素上，它就不会浮起来了。