Problems while trying to reduce the amount of vertical space in a table: vertical-align not working?

Question

In CSS, what is the correct way of forcing to move up the vertical margin for all the texts in each cell. So all the content in the cells (texts) are moved to the top vertically?

For example, 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>

Generate the following tables:

How can I move a little bit up the text on the tables to produce something like this:

After reading this question, I tried to adjust the height, padding, and table top as follows:

padding: 10px;

height: 80px;

vertical-align:top;

vertical-align:super;

padding-bottom: -1em;

However, none of the above options move the text upper. As you can see, in the previous image the upper white spaces were reduced by moving up the texts, while the below blank spaces are increased. How can I move up the texts like in the above image?

Answer 1

Using vertical-align: super seems to do the trick. Try this out.

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>

To make things look similar to the layout in the second image you included, check out the code below. The reason why this isn't possible with a single <table> is because the <td> elements text are stored in rows together and changing their position in the row with something like position: absolute won't be pretty (or exact).

To allow the text to be laid out in a basic document flow (Normal flow), we can't have the column1 and column2 <td> elements in the same row or they will be confined to that specific rows content box. It becomes quite a difficult CSS solution to make it work with two separate <table> elements as their content box height will be different unless they have the same amount of text so here is an example of the layout you wanted but without using a table.

Using CSS Flexbox the height of each child container will be the same regardless of whether they have the same amount of content.

.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>