HTML/CSS新手求助：调整footer位置并修复表格换行问题

核心问题分析 #

表格最后一行内容换行、footer上移后表格无变化的根源：

• 表格单元格(td)被设置为display:block，直接破坏了表格默认的行列布局，导致每个单元格独占一行，右侧内容因空间不足被迫换行。
• 用position:relative; bottom:50px移动footer只是视觉上的偏移，没有真正缩减footer与表格之间的空间，表格布局不会因此改变。

具体修改步骤 #

1. 修复表格单元格布局
   移除.levy__sloupec和.pravy__sloupec中的display:block，让表格回归默认的行列结构；同时给表格添加width:100%，确保两列能充分利用可用空间。

2. 移除多余的padding-bottom
   删除.levy__sloupec和.pravy__sloupec里的padding-bottom:5px，避免行间距占用额外空间。

3. 正确实现footer上移
   将媒体查询中的position:relative; bottom:50px替换为margin-top:-50px，这样能真正减少footer与表格的间距，同时不影响其他元素的布局逻辑。

修改后的完整代码 #

HTML代码（无需调整）

<table>
  <tr>
    <td class="levy__sloupec">Etiam poseure</td>
    <td class="pravy__sloupec">Nulla est</td>
  </tr>
  <tr>
    <td class="levy__sloupec">Fusce wisi</td>
    <td class="pravy__sloupec">2305</td>
  </tr>
  <tr>
    <td class="levy__sloupec">Bla hola tola et</td>
    <td class="pravy__sloupec">Rerum trada</td>
  </tr>
  <tr>
    <td class="levy__sloupec">Vie visi</td>
    <td class="pravy__sloupec">A</td>
  </tr>
</table>

<footer class="karta__flex">
  <footer class="karta__footer">Sumarum</footer>
  <footer class="karta__footer"><span class="karta__druheslovo">137</span></footer>
</footer>

CSS代码

table {
  width: 100%; /* 新增：让表格占满可用宽度 */
  font-size: 1.3rem; 
  margin-top: 20px;
  border-collapse: separate;
  border-spacing: 0 5px; /* 可选：替代原padding-bottom，保持行间距 */
}

.levy__sloupec{
  font-weight: normal;
  font-style: italic;
  text-align: right;
  white-space: nowrap; 
  padding-right: 25px; /* 替换margin-right，避免布局错位 */
}

.pravy__sloupec{
  font-weight: 700;
  text-align: left;
  padding-left: 25px; /* 替换margin-left，避免布局错位 */
}

.karta__flex {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

@media screen and (max-width: 1640px) {
  .karta__flex {
    font-size: 2rem;
    margin-top: -50px; /* 替换相对定位，真正缩减间距 */
  }
}

额外说明 #

• border-spacing: 0 5px是用来替代原有的padding-bottom，如果不需要行间距可以直接删除。
• 将margin-right/margin-left改为padding-right/padding-left，是因为表格单元格的margin容易导致布局错位，使用padding更稳妥。

内容的提问来源于stack exchange，提问作者Nicki Howard