Question 219185 in Html Question posted in
Some basic documentation can be found here.

Html – reducing the space between two tr tags

I want to display a company logo and a company name right next to it. This is what i tried to do. This code will run in old browsers that does not support flexbox so I need to do this in simple HTML and CSS. This is what I tried to write:

.logo {
  transform: translateX(2em);
}

.name1 {
  font-size: 25px;
  color: #e9c46a;
}

.name2 {
  font-size: 25px;
  color: white;
}
<table style="background-color: cadetblue;width:100%;padding:10px">
  <tr>
    <td rowspan="3" width="130">
      <img src="Images/facebook.png" height="80" width="80" class="logo" />
    </td>
  </tr>
  <tr>
    <td class="name1">This is some text</td>
  </tr>
  <tr>
    <td class="name2">This is some text1</td>
  </tr>
</table>

This is how the screen shot looks like:

enter image description here

is their any way, I can reduce the space between "This is some text" and "This is some text1". I don’t want to use flexbox because I am using this code on older device. I am not very good with CSS. I can use float if anyone can help me with using float. Below are the styles that I am using:

any help will be appreciated.

Tags:

2

Answers


  1. 0

    Vertically aligning the texts to bring them closer with valign attribute and also removing the padding of the table cells removes more space. I hope that’s close enough.

    .logo {
transform: translateX(2em);
}

.name1 {
font-size: 25px;
color: #e9c46a;
}

.name2 {
font-size: 25px;
color: white;
}
    <table style="background-color: cadetblue;width:100%;padding:10px">
    <tr>
        <td rowspan="3" width="130">
        <img src="Images/facebook.png" height="80" width="80" class="logo" />
        </td>
    </tr>
    <tr>
        <td class="name1" valign="bottom" style="padding: 0;">This is some text</td>
    </tr>
    <tr>
        <td class="name2" valign="top" style="padding: 0;">This is some text1</td>
    </tr>
</table>
    Login or Signup to reply.
  2. 0

    There’s a couple of ways to bring your text content closer togheter.
    You probably want to apply a combination of border-collapse and vertical-align rules.

    I’ve applied a white border to the table cells so that it becomes apparent how the rule effects your output.

    The border-collapse will remove spacing between the cells.
    The vertical-align will attach the text to the bottom/top of the cell.

    The image itself will cause the text cell to take up more space.
    If different vertical aligns are not feasible, you might want to decrease the image size.

    The text inside the cell uses line-height to determine how much vertical space to take up, reducing that either via percentage or via px value will bring the lines even closer togheter.

    .logo {
  transform: translateX(2em);
}

.name1 {
  font-size: 25px;
  color: #e9c46a;
}

.name2 {
  font-size: 25px;
  color: #ffffff;
}

.container {
  background: #ccc;
  padding-top: 20px;
  padding-bottom: 20px;
}

.container img {
  width: 80px;
  height: 80px;
}

.small-image img {
  width: auto;
  height: 40px;
}

.collapse-border table {
  border-collapse: collapse;
  border-spacing: 0;
}

.font-aligned .name1 {
  vertical-align: bottom;
}

.font-aligned .name2 {
  vertical-align: top;
}

.line-height td {
  line-height: 80%;
}

td {
  border: 1px solid #fff;
}
    <div class="container ">
  <table style="background-color: cadetblue;width:100%;padding:10px">
    <tr>
      <td rowspan="3" width="130">
        <img src="https://placekitten.com/300/300" height="80" width="80" class="logo" />
      </td>
    </tr>
    <tr>
      <td class="name1">original: This is some text</td>
    </tr>
    <tr>
      <td class="name2">original: This is some text1</td>
    </tr>
  </table>
</div>

<div class="container small-image">
  <table style="background-color: cadetblue;width:100%;padding:10px">
    <tr>
      <td rowspan="3" width="130">
        <img src="https://placekitten.com/300/300" class="logo" />
      </td>
    </tr>
    <tr>
      <td class="name1">smaller image: This is some text</td>
    </tr>
    <tr>
      <td class="name2">smaller image: This is some text1</td>
    </tr>
  </table>
</div>

<div class="container collapse-border">
  <table style="background-color: cadetblue;width:100%;padding:10px">
    <tr>
      <td rowspan="3" width="130">
        <img src="https://placekitten.com/300/300" class="logo" />
      </td>
    </tr>
    <tr>
      <td class="name1">collapsed border: This is some text</td>
    </tr>
    <tr>
      <td class="name2">collapsed border: This is some text1</td>
    </tr>
  </table>
</div>

<div class="container font-aligned">
  <table style="background-color: cadetblue;width:100%;padding:10px">
    <tr>
      <td rowspan="3" width="130">
        <img src="https://placekitten.com/300/300" class="logo" />
      </td>
    </tr>
    <tr>
      <td class="name1">font align bottom: This is some text</td>
    </tr>
    <tr>
      <td class="name2">font align top: This is some text1</td>
    </tr>
  </table>
</div>

<div class="container line-height">
  <table style="background-color: cadetblue;width:100%;padding:10px">
    <tr>
      <td rowspan="3" width="130">
        <img src="https://placekitten.com/300/300" class="logo" />
      </td>
    </tr>
    <tr>
      <td class="name1">line height smaller: This is some text</td>
    </tr>
    <tr>
      <td class="name2">line-height smaller: This is some text1</td>
    </tr>
  </table>
</div>

<div class="container collapse-border font-aligned line-height">
  <table style="background-color: cadetblue;width:100%;padding:10px">
    <tr>
      <td rowspan="3" width="130">
        <img src="https://placekitten.com/300/300" height="80" width="80" class="logo" />
      </td>
    </tr>
    <tr>
      <td class="name1">every rule: This is some text</td>
    </tr>
    <tr>
      <td class="name2">every rule: This is some text1</td>
    </tr>
  </table>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search