html - 尝试减少表中的垂直空间量时出现问题 : vertical-align not working?

Question

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

例如，this html and 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>

生成下表:

我怎样才能将表格上的文本稍微向上移动一点以产生如下内容:

在 reading this question 之后，我尝试调整高度、内边距和桌面，如下所示:

内边距:10px;

高度:80px;

vertical-align:top;

vertical-align:super;

padding-bottom: -1em;

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

Answer 1

使用 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>