首页 / 技术问答 / Html问答列表 / 问答详情

Html 如何减少表格行中的垂直空间

我有一个问题是如何制作不同大小的不同字符串.不合适，或者我做错了什么.下面我将发布一个例子，说明应该如何，以及我是如何做到的.如果有人能提供建议，我将非常高兴.是的，根据错误代码本身，你可以说，我只是在学习，我接受任何批评:)

我需要使某些区域的行大小相同.例如，其中1.2. 3. 4. 5. 你需要让它们更窄，如第一张图所示.等等，所有的表格都要了解线条的大小.

Example table

My table

Here's what happens if I change the padding size

Edited

CODE:

body {
  background-image: url(./h3back.jpg);
}

td {
  padding: 15px 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 20px;
}

.t1t {
  border-top: solid 3px;
}

.t1r {
  border-right: solid 3px;
}

.t1b {
  border-bottom: solid 3px;
}

.t11r {
  border-right: solid 1px;
}

.t11b {
  border-bottom: solid 1px;
}

.t1bd {
  border-right: 1px;
  border-right-style: dashed;
}

.t1tx {
  transform: rotate(270deg);
}

.t2tx,
.t1tx {
  text-align: center;
}

.t3tx {
  text-align: right;
}

.t4tx {
  font-weight: bold;
}
</head>

<body>
  <table>
    <thead>
      <tr>
        <td colspan="2" rowspan="2" class="t1t t1r t1b t4tx">Ⅱ. Облік проведення занять та їх <br> відвідування </td>
        <td class="t1t t1r t11b t11w" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t1r t11b" rowspan="4"></td>
        <td colspan="4" class="t1t t1r t11b t12w t2tx">Тиждень №__________</td>
        <td class="t1t t11b t13w t2tx" rowspan="4">Для нотаток</td>
      </tr>
      <tr>
        <td colspan="4" class="t1r t11b t2tx">Пропущ. занять (годин)</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td colspan="2" class="t11r t11b t2tx">за тиждень</td>
        <td colspan="2" class="t1r t11b t2tx">від початку</td>
      </tr>
      <tr>
        <td class="t1b"></td>
        <td class="t1b wt12 t3tx">Навчальна дисципліна,<br>викладач, заклад</td>
        <td class="t11r t11b t1tx">Усього</td>
        <td class="t11r t11b t1tx">З непов.<br> причини</td>
        <td class="t11r t11b t1tx">Усього</td>
        <td class="t1r t11b t1tx">З непов.<br> причини</td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td rowspan="2" class="t1r t1b t2tx t4tx">№ <br> з/п</td>
        <td rowspan="2" class="t1r t1b t2tx t4tx">Прізвище та ініціали <br> студентів</td>
        <td class="t11b t1r t2tx">Аудит.</td>
        <td colspan="2" class="t11r t11b"></td>
        <td colspan="2" class="t11r t11b"></td>
        <td colspan="2" class="t11r t11b"></td>
        <td colspan="2" class="t1r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t1r t1b t2tx t4tx">Дата</td>
        <td colspan="8" class="t1r t1b t2tx t4tx">Пн.</td>
        <td class="t11r t1b"></td>
        <td class="t11r t1b"></td>
        <td class="t11r t1b"></td>
        <td class="t1r t1b"></td>
        <td class="t1b"></td>
      </tr>
    </tbody>

    <tbody>
      <tr>
        <td class="t11b t1r t2tx t4tx">1.</td>
        <td colspan="2" class="t11b t1r"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1r"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t11b t1r t2tx t4tx">2.</td>
        <td colspan="2" class="t11b t1r"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1r"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t11b t1r t2tx t4tx">3.</td>
        <td colspan="2" class="t11b t1r"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1r"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t11b t1r t2tx t4tx">4.</td>
        <td colspan="2" class="t11b t1r"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1r"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t11b t1r t2tx t4tx">5.</td>
        <td colspan="2" class="t11b t1r"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1r"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t11b t1r"></td>
        <td colspan="2" class="t11b t1r"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1r"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t1b t1r"></td>
        <td colspan="2" class="t1b t1r"></td>
        <td class="t1b t1bd"></td>
        <td class="t1b t1bd"></td>
        <td class="t1b t1bd"></td>
        <td class="t1b t1bd"></td>
        <td class="t1b t1bd"></td>
        <td class="t1b t1bd"></td>
        <td class="t1b t1bd "></td>
        <td class="t1b t1r"></td>
        <td class="t11r t1b"></td>
        <td class="t11r t1b"></td>
        <td class="t11r t1b"></td>
        <td class="t1r t1b"></td>
        <td class="t1b"></td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td colspan="3" class="t1b t1r t4tx">Усього відсутніх<br>(запізнилося)</td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t1r"></td>
        <td colspan="5" class="t1b">Пропусків<br>у группі</td>
      </tr>
      <tr>
        <td colspan="3" class="t1b t1r t4tx">Підписи викладача<br>і старости</td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t1r"></td>
        <td class="t1b t1r"></td>
        <td class="t1b t1r"></td>
        <td class="t1b t1r"></td>
        <td class="t1b t1r"></td>
        <td class="t1b"></td>
      </tr>
    </tfoot>

  </table>

</body>

</html>

推荐答案

减少表格单元格上的垂直填充似乎更接近你的目标.然后，我们可以在旋转的单元格上放置更大的填充物，以保持它们的间距.

在表格单元格内旋转div元素可能更容易，而不是单元格本身.这将使填充物正常工作.

为了让空行的高度看起来好像它们包含文本，我们可以使用带有空白内容的伪元素.

body {
  background-image: url(./h3back.jpg);
}

td {
  padding: 3px 10px; /* <----------------------------------HERE */
}

td:after {
  content: ' ';
  display: inline-block; /* force empty rows to have height */
}

td.t1tx {
  padding: 25px 10px; /* <----------------------------------HERE */
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 20px;
}

.t1t {
  border-top: solid 3px;
}

.t1r {
  border-right: solid 3px;
}

.t1b {
  border-bottom: solid 3px;
}

.t11r {
  border-right: solid 1px;
}

.t11b {
  border-bottom: solid 1px;
}

.t1bd {
  border-right: 1px;
  border-right-style: dashed;
}

.t1tx {
  transform: rotate(270deg);
}

.t2tx,
.t1tx {
  text-align: center;
}

.t3tx {
  text-align: right;
}

.t4tx {
  font-weight: bold;
}
</head>

<body>
  <table>
    <thead>
      <tr>
        <td colspan="2" rowspan="2" class="t1t t1r t1b t4tx">Ⅱ. Облік проведення занять та їх <br> відвідування </td>
        <td class="t1t t1r t11b t11w" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t11r t11b" rowspan="4"></td>
        <td class="t1t t1r t11b" rowspan="4"></td>
        <td colspan="4" class="t1t t1r t11b t12w t2tx">Тиждень №__________</td>
        <td class="t1t t11b t13w t2tx" rowspan="4">Для нотаток</td>
      </tr>
      <tr>
        <td colspan="4" class="t1r t11b t2tx">Пропущ. занять (годин)</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td colspan="2" class="t11r t11b t2tx">за тиждень</td>
        <td colspan="2" class="t1r t11b t2tx">від початку</td>
      </tr>
      <tr>
        <td class="t1b"></td>
        <td class="t1b wt12 t3tx">Навчальна дисципліна,<br>викладач, заклад</td>
        <td class="t11r t11b t1tx">Усього</td>
        <td class="t11r t11b t1tx">З непов.<br> причини</td>
        <td class="t11r t11b t1tx">Усього</td>
        <td class="t1r t11b t1tx">З непов.<br> причини</td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td rowspan="2" class="t1r t1b t2tx t4tx">№ <br> з/п</td>
        <td rowspan="2" class="t1r t1b t2tx t4tx">Прізвище та ініціали <br> студентів</td>
        <td class="t11b t1r t2tx">Аудит.</td>
        <td colspan="2" class="t11r t11b"></td>
        <td colspan="2" class="t11r t11b"></td>
        <td colspan="2" class="t11r t11b"></td>
        <td colspan="2" class="t1r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t1r t1b t2tx t4tx">Дата</td>
        <td colspan="8" class="t1r t1b t2tx t4tx">Пн.</td>
        <td class="t11r t1b"></td>
        <td class="t11r t1b"></td>
        <td class="t11r t1b"></td>
        <td class="t1r t1b"></td>
        <td class="t1b"></td>
      </tr>
    </tbody>

    <tbody>
      <tr>
        <td class="t11b t1r t2tx t4tx">1.</td>
        <td colspan="2" class="t11b t1r"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1r"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t11b t1r t2tx t4tx">2.</td>
        <td colspan="2" class="t11b t1r"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1r"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t11b t1r t2tx t4tx">3.</td>
        <td colspan="2" class="t11b t1r"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1r"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t11b t1r t2tx t4tx">4.</td>
        <td colspan="2" class="t11b t1r"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1r"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t11b t1r t2tx t4tx">5.</td>
        <td colspan="2" class="t11b t1r"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1r"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t11b t1r"></td>
        <td colspan="2" class="t11b t1r"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1bd"></td>
        <td class="t11b t1r"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t11r t11b"></td>
        <td class="t1r t11b"></td>
        <td class="t11b"></td>
      </tr>
      <tr>
        <td class="t1b t1r"></td>
        <td colspan="2" class="t1b t1r"></td>
        <td class="t1b t1bd"></td>
        <td class="t1b t1bd"></td>
        <td class="t1b t1bd"></td>
        <td class="t1b t1bd"></td>
        <td class="t1b t1bd"></td>
        <td class="t1b t1bd"></td>
        <td class="t1b t1bd "></td>
        <td class="t1b t1r"></td>
        <td class="t11r t1b"></td>
        <td class="t11r t1b"></td>
        <td class="t11r t1b"></td>
        <td class="t1r t1b"></td>
        <td class="t1b"></td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td colspan="3" class="t1b t1r t4tx">Усього відсутніх<br>(запізнилося)</td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t1r"></td>
        <td colspan="5" class="t1b">Пропусків<br>у группі</td>
      </tr>
      <tr>
        <td colspan="3" class="t1b t1r t4tx">Підписи викладача<br>і старости</td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t11r"></td>
        <td class="t1b t1r"></td>
        <td class="t1b t1r"></td>
        <td class="t1b t1r"></td>
        <td class="t1b t1r"></td>
        <td class="t1b t1r"></td>
        <td class="t1b"></td>
      </tr>
    </tfoot>

  </table>

</body>

</html>

Html相关问答推荐

后续使用收件箱从网页表中提取值

卸载伪元素 destruct 了CSS

XPATH text()函数遇到困难

将容器水平偏离中心放置在桌面上;在移动设备上平稳地集中缩小规模

卡片上方的文本

Vue.js复选框对齐问题：在表格单元格中居中复选框

在 Select 前后更改选项卡的背景

如何修复与导航栏重叠的css网格？

在NzMessageService中传递动态TemplateRef- Angular 15

如何创建剪切到路径的循环文本字幕？

元素在向x提供溢出时被隐藏

希望平稳过渡到悬停状态

如何为卡片块制作侧丝带样式

并排放置两个 div，同时 div2 环绕 div1

如何使Bootstrap 5卡可点击

如何使用 html 和 css 为卡片创建此背景框架

有没有办法使用 CSS border-radius 创建 HTML 视频标签的三角形显示？

无法从社交栏中 Select 选项

html元素可以被css跳过吗？

粘性定位的子元素忽略父母的填充

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630