时间戳

首页 > 解决方案 > 尝试减少表格中的垂直空间量时出现问题：垂直对齐不起作用？

html - 尝试减少表格中的垂直空间量时出现问题：垂直对齐不起作用？

问题描述

在 CSS 中，强制向上移动每个单元格中所有文本的垂直边距的正确方法是什么。那么单元格（文本）中的所有内容都垂直移动到顶部？

比如这个html和CSS

    table {
      padding: 10px;
      border: 0px solid black;
      border-radius: 10px;
      border-spacing: 75px 0px;
      padding-left: 50px;
    }

    td {
      height: 20px;
      padding: 10px;
      width: 50%;
      border-top: none;
    }

    tr:not(:last-child) td {
        border-bottom: none;
    }
<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: unset;">
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat
        est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum </td>
      <td>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</td>
    </tr>
    <tr>
      <td>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</td>
    </tr>
    <tr>
      <td>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
        odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</td>
    </tr>
    <tr>
      <td>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</td>
      <td> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</td>
    </tr>
  </tbody>
</table>

生成下表：

在此处输入图像描述

如何将表格上的文本向上移动一点以产生如下内容：

在此处输入图像描述

阅读此问题后，我尝试如下调整高度、填充和桌面：

padding: 10px;

height: 80px;

vertical-align:top;

vertical-align:super;

padding-bottom: -1em;

但是，以上选项都不会将文本上移。如您所见，在上图中，通过向上移动文本来减少上方的空白，而下方的空白则增加了。我怎样才能像上图一样向上移动文本？

标签： htmlcss

解决方案

使用vertical-align: super似乎可以解决问题。试试这个。

table {
      padding: 10px;
      border: 0px solid black;
      border-radius: 10px;
      border-spacing: 75px 0px;
      padding-left: 50px;
    }

    td {
      vertical-align: text-top;
      /*height: 20px; */
      height: 100%;
      padding: 10px;
      width: 50%;
      border-top: none;
    }

    tr:not(:last-child) td {
        border-bottom: none;
    }
<table border="1" class="dataframe">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat
        est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum </td>
      <td>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</td>
    </tr>
    <tr>
      <td>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</td>
    </tr>
    <tr>
      <td>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
        odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</td>
    </tr>
    <tr>
      <td>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</td>
      <td> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</td>
    </tr>
  </tbody>
</table>

要使内容看起来与您包含的第二张图片中的布局相似，请查看下面的代码。使用单个元素不可能做到这一点的原因<table>是<td>元素文本一起存储在行中，并且用类似的东西改变它们在行中的位置position: absolute不会很漂亮（或精确）。

为了允许在基本文档流（正常流）中布置文本，我们不能将 column1 和 column2<td>元素放在同一行中，否则它们将被限制在特定行的内容框中。使它与两个单独<table>的元素一起工作变得相当困难的 CSS 解决方案，因为它们的内容框高度将不同，除非它们具有相同数量的文本，所以这里是您想要的布局示例，但不使用表格。

使用CSS Flexbox，每个子容器的高度都将相同，无论它们是否具有相同的内容量。

.row {
  display: flex;
}

.row h3 {
  text-align: center;
  border-bottom: solid;
  width: 100%;
  margin: 0;
  padding: .5rem 0;
}

.row .layout-one div,
.row .layout-two div {
  padding: .5rem;
}

.layout-one, .layout-two {
  border: .1rem solid #000;
  border: solid;
  flex: 1; /* make flex items have equal width */
  margin: 0 1rem;
}
<section class="row">
  <div class="layout-one">
    <h3>Col 1</h3>
    <div>
        <p>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat
          est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum </p>
        <p>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</p>
        <p>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
          odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</p>
        <p>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</p>
     </div>
  </div>
  <div class="layout-two">
    <h3>Col 2</h3>
    <div>
        <p>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</p>
        <p>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</p>
        <p>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</p>
        <p> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</p>
     </div>
  </div>
</section>

推荐阅读