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?

Tanner Dolby · Accepted Answer · 2021-02-16T05:07:33.790

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>

Thanks for the help, is there any way to move it a little bit upper without clashing with the other text or top of the table, if you check the question I also try with super and top, however, I would prefer to move it a bit uper — aywoki, Feb 16 '21 at 03:07
Your welcome. Feel free to mark my answer as accepted if it solved your issue. What exactly do you mean? With `vertical-align: super` the text is perfectly aligned in each row? Do you want it to look like the second picture you included? — Tanner Dolby, Feb 16 '21 at 03:12
Yes I would like it similar to the second image, the second image is the expected output, the idea is tu reduce the gaps above, and make them bigger at the buttom — aywoki, Feb 16 '21 at 03:14
Ok, thanks for the clarification. Give me a second and I'll update my answer to make it look similar to the second image. — Tanner Dolby, Feb 16 '21 at 03:15
@aywoki Sorry it took so long (this ended up being a bit involved) but in the second part of my answer I included a working example of what you seek to layout in the second image. I can include the example of using two `` elements but the table with column2 won't have the same height as column1 table. — Tanner Dolby, Feb 16 '21 at 04:26

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

1 Answers1