html - 如何使用 CSS 使这个网页空间优化?
问题描述
这是源代码:
<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 上的示例尝试了这种方法:
table {
column-span: all;
}
但它没有成功。
2 - 除了字体和列号调整之外,您还有什么建议可以最大限度地利用空间并减少纸张的使用吗?
解决方案
这一点都不复杂。您只需将所有键绑定和标题放在一个表中,而不是每个都放在它自己的表中。然后,我们使用一点 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>
推荐阅读
- sql - 如何在 Snowflake 中获取未压缩表的总大小?
- sass - Gulp-Sass 变量未设置
- php - 解决了!Cron 作业只有在清除缓存后才能工作
- r - R中的交叉表查找两个变量的关系
- excel - 计数“1”连续出现两次以上的次数,如果最大计数小于 4 - 包括“1”,其中没有连续 - Excel
- scala - 希望根据单独 DF 的值减去一行中的每个值
- flutter - 使用颤振时我无法从云火库中获取数据
- android - Android Studio 无法解析 androidx 符号
- mongodb - 官方 mongo docker 映像无法通过 volumen 使用自定义文件
- python - Python包根据关键字从文本文件中提取句子