如何使用 CSS 使这个网页空间优化？答案

【问题标题】：How to make this web page space-optimized using CSS?如何使用 CSS 使这个网页空间优化？
【发布时间】：2021-10-29 07:41:49
【问题描述】：

我有这个小网页：

这是源代码：

<head>
  <meta charset="UTF-8">
  <style>
    body {
      margin-left: 20px;
      margin-top: 20px;
    }
    
    h1 {
      font-family: Helvetica Neue, Helvetica;
      font-weight: 500;
    }
    
    h2 {
      font-family: Helvetica Neue, Helvetica;
      font-weight: 500;
    }
    
    h3 {
      font-family: Helvetica Neue, Helvetica;
      font-weight: 500;
    }
    
    h4 {
      font-family: Helvetica Neue, Helvetica;
      font-weight: 500;
    }
    
    h5 {
      font-family: Helvetica Neue, Helvetica;
      font-weight: 500;
    }
    
    h6 {
      font-family: Helvetica Neue, Helvetica;
      font-weight: 500;
    }
    
    hr {
      height: 3px;
      border-radius: 2px;
      border-width: 0;
      color: lightgray;
      background-color: lightgray;
    }
    
    .button {
      display: inline-block;
      background-color: darkgray;
      color: white;
      text-decoration: none;
      border-radius: 2px;
      padding: 6px;
      margin-left: 2px;
      margin-right: 2px;
    }
    
    .button:hover {
      color: black;
    }
    
    .button:visited {
      color: white;
    }
    
    .button:active {
      color: white;
    }
    
    a {
      color: gray;
    }
  </style>
</head>

<body nyxt-identifier="0">
  <style nyxt-identifier="1">
    body {
      margin-left: 20px;
      margin-top: 20px;
    }
    
    h1 {
      font-family: Helvetica Neue, Helvetica;
      font-weight: 500;
    }
    
    h2 {
      font-family: Helvetica Neue, Helvetica;
      font-weight: 500;
    }
    
    h3 {
      font-family: Helvetica Neue, Helvetica;
      font-weight: 500;
    }
    
    h4 {
      font-family: Helvetica Neue, Helvetica;
      font-weight: 500;
    }
    
    h5 {
      font-family: Helvetica Neue, Helvetica;
      font-weight: 500;
    }
    
    h6 {
      font-family: Helvetica Neue, Helvetica;
      font-weight: 500;
    }
    
    hr {
      height: 3px;
      border-radius: 2px;
      border-width: 0;
      color: lightgray;
      background-color: lightgray;
    }
    
    .button {
      display: inline-block;
      background-color: darkgray;
      color: white;
      text-decoration: none;
      border-radius: 2px;
      padding: 6px;
      margin-left: 2px;
      margin-right: 2px;
    }
    
    .button:hover {
      color: black;
    }
    
    .button:visited {
      color: white;
    }
    
    .button:active {
      color: white;
    }
    
    a {
      color: gray;
    }
  </style>
  <h1 nyxt-identifier="2">Bindings</h1>
  <p nyxt-identifier="3">
  </p>
  <div nyxt-identifier="4">
    <h3 nyxt-identifier="5">override-map</h3>
    <table nyxt-identifier="6">
      <tbody nyxt-identifier="7">
        <tr nyxt-identifier="8">
          <td nyxt-identifier="9">C-S
          </td>
          <td nyxt-identifier="10">search-buffers
          </td>
        </tr>
        <tr nyxt-identifier="11">

          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div nyxt-identifier="44">
    <h3 nyxt-identifier="45">web-cua-map</h3>
    <table nyxt-identifier="46">
      <tbody nyxt-identifier="47">
        <tr nyxt-identifier="48">
          <td nyxt-identifier="49">f3
          </td>
          <td nyxt-identifier="50">search-buffer
          </td>
        </tr>
        <tr nyxt-identifier="51">

          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div nyxt-identifier="195">
    <h3 nyxt-identifier="196">base-cua-map</h3>
    <table nyxt-identifier="197">
      <tbody nyxt-identifier="198">
        <tr nyxt-identifier="199">
          <td nyxt-identifier="200">f5
          </td>
          <td nyxt-identifier="201">reload-current-buffer
          </td>
        </tr>
        <tr nyxt-identifier="202">

          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

上面的代码和图片是真正问题的简化。在真正的问题中，页面要大得多，因为表格中的元素比当前显示的要多。

我想更好地利用空间，这样打印就不会花费太多纸张。屏幕右侧浪费了很多空间。

内容可以横向分布而不是仅纵向分布。

实现此目标的两种可行方法是 (i) 减小字体大小，以及 (ii) 将表格设为 2 列或 3 列而不是 1 列。

好的。我可以使用 CSS 减小字体大小：

tr { font-size: 10px}

因此，我想问一下：

1 - 如何使用 CSS 将表格设为 3 列或 2 列？

我按照 W3C 上的example 尝试了这种方法：

table {
  column-span: all;
}

但没有成功。

2 - 除了字体和列号调整之外，您还有什么建议可以最大限度地利用空间并减少纸张的使用？

【问题讨论】：

CSS 无效；包含空格的字体名称必须用引号引起来。此外，您不需要为 h1 到 h6 中的每一个使用单独的规则；它可能只是h1,h2,h3,h4,h5,h6 { font-family: 'Helvetica Neue', Helvetica; font-weight: 500; }。
您可以使用打印媒体查询（@media print）为打印页面添加特定规则。

标签： html css html-table

【解决方案1】：

这一点都不复杂。您只需将所有键绑定和标题放在 one 表中，而不是每个都放在它自己的表中。然后，我们使用一点 CSS 来获得表格单元格之间的小边框线 - 如果您不想要边框，只需删除 CSS 部分。像这样：

table {
  border-spacing: 0;
}

td {
  border: 1px solid black;
  padding: 10px;
}

<h1>Bindings</h1>
<table>
  <tbody>
    <tr>
      <td colspan="2">
        override-map
      </td>
      <td colspan="2">
        web-cua-map
      </td>
      <td colspan="2">
        base-cua-map
      </td>
    </tr>
    <tr>
      <td>
        C-S
      </td>
      <td>
        search-buffers
      </td>
      <td>
        F3
      </td>
      <td>
        search-buffer
      </td>
      <td>
        F5
      </td>
      <td>
        reload-current-buffer
      </td>
    </tr>
  </tbody>
</table>

【讨论】：