CODEWITHSUNDEEP
htmlcsshtml-tablevertical-alignment
SuchenUndFinden
SuchenUndFinden

Reputation: 13

HTML - Table -vertical position text within cell

I would like to have text within a table cell to be positioned a little bit higher, near the top. Please take a look at the provided screenshot. You can see in the TD below Column 1 how I want it to look like:

https://jsfiddle.net/38f1aru6/1/

HTML:

<table class="table_text">
  <tbody>
    <tr>
      <td colspan="4">
        <center>
          <b>Title</b>
        </center>
      </td>
    </tr>
    <tr>
      <td>
        <center>
          <b>Column1</b>
        </center>
      </td>
      <td>
        <center>
          <b>Column2</b>
        </center>
      </td>
      <td>
        <center>
          <b>Column3</b>
        </center>
      </td>
      <td>
        <center>
          <b>Column4</b>
        </center>
      </td>
    </tr>
    <tr>
      <td>
        <span class="td_content yellow_marked">Cell content here</span>
      </td>
      <td>
        <span class="td_content yellow_marked">Cell content here</span>
      </td>
      <td>lirum</td>
      <td>larum</td>
    </tr>
  </tbody>
</table>

CSS:

.td_content
{

}

.yellow_marked
{
  background-color: yellow;
}

table
{
  border: 1px solid black;  
}
td
{
  border: 1px solid;
}

I'm new to HTML and CSS... and a little bit shocked how complicated some simple styling can be.

My first guess was text alignment within a cell... vertical-align? Didn't work. Then I tried to use an element with absolute positioning within an element with relative positioning. It did work ... almost ... but the text did flow out of the cell.

I would be very grateful if you could show me the right direction to solve this (easy?) task.


Edit:

I want to keep the yellow bar in the same position, but I want to move the text within the bar upward.

Upvotes: 1

Views: 2990

Answers (4)

Mr Lister
Mr Lister

Reputation: 46539

It seems from comments that you want to keep the yellow bar in the same position, but you want to move the text in it upward. That is not hard, but it does involve adding extra markup; otherwise it's impossible to separate the text from the background in that way. So, here you go.

.yellow_marked {
  background-color: yellow;
}

table {
  border: 1px solid black;
}

td, th {
  border: 1px solid;
}

/* added css */

caption {
  font-weight: bold
}

.yellow_marked>span {
  position: relative;
  top: -2px;
}
<table class="table_text">
  <caption>
    Title
  </caption>
  <tbody>
    <tr>
      <th>
        Column1
      </th>
      <th>
        Column2
      </th>
      <th>
        Column3
      </th>
      <th>
        Column4
      </th>
    </tr>
    <tr>
      <td>
        <span class="td_content yellow_marked"><span>Cell content here</span></span>
      </td>
      <td>
        <span class="td_content yellow_marked">Cell content here</span>
      </td>
      <td>lirum</td>
      <td>larum</td>
    </tr>
  </tbody>
</table>

Also, I'm sorry for changing your HTML, but you were using non-semantic markup for the title and the column headers, not to mention obsolete and unnecessary elements; couldn't bear to leave those in.

If you want, you can use the new CSS with the old HTML though.

Upvotes: 1

sol
sol

Reputation: 22919

You could add the yellow background to the td instead. And then use a negative margin on the span element.

fiddle

.td_content {}

.yellow_marked {
  background-color: yellow;
}

.yellow_marked span {
  display: block;
  margin-top: -4px;
}

table {
  border: 1px solid black;
}

td {
  border: 1px solid;
}
<table class="table_text">
  <tbody>
    <tr>
      <td colspan="4">
        <center>
          <b>Title</b>
        </center>
      </td>
    </tr>
    <tr>
      <td>
        <center>
          <b>Column1</b>
        </center>
      </td>
      <td>
        <center>
          <b>Column2</b>
        </center>
      </td>
      <td>
        <center>
          <b>Column3</b>
        </center>
      </td>
      <td>
        <center>
          <b>Column4</b>
        </center>
      </td>
    </tr>
    <tr>
      <td class="yellow_marked">
        <span class="td_content">Cell content here</span>
      </td>
      <td>
        <span class="td_content yellow_marked">Cell content here</span>
      </td>
      <td>lirum</td>
      <td>larum</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Kiran Dash
Kiran Dash

Reputation: 4956

vertical-align:top works.

.td_content
{
  
}

.yellow_marked
{
  background-color: yellow;
}

table
{
  border: 1px solid black;  
}
td
{
  border: 1px solid;
  height: 50px;
  vertical-align: top; /* To move the text to the top */
  padding-top: 5px; /* To create a gap at the top */
}
<table class="table_text">
  <tbody>
    <tr>
      <td colspan="4">
        <center>
          <b>Title</b>
        </center>
      </td>
    </tr>
    <tr>
      <td>
        <center>
          <b>Column1</b>
        </center>
      </td>
      <td>
        <center>
          <b>Column2</b>
        </center>
      </td>
      <td>
        <center>
          <b>Column3</b>
        </center>
      </td>
      <td>
        <center>
          <b>Column4</b>
        </center>
      </td>
    </tr>
    <tr>
      <td>
        <span class="td_content yellow_marked">Cell content here</span>
      </td>
      <td>
        <span class="td_content yellow_marked">Cell content here</span>
      </td>
      <td>lirum</td>
      <td>larum</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Mihai T
Mihai T

Reputation: 17687

you can use vertical-align:super on the span inside ( on .td-content )

see snippet below or jsFiddle

let me know if this is what you want

.td_content
{
  vertical-align:super;
}

.yellow_marked
{
  background-color: yellow;
}

table
{
  border: 1px solid black;  
}
td
{
  border: 1px solid;

}
<table class="table_text">
  <tbody>
    <tr>
      <td colspan="4">
        <center>
          <b>Title</b>
        </center>
      </td>
    </tr>
    <tr>
      <td>
        <center>
          <b>Column1</b>
        </center>
      </td>
      <td>
        <center>
          <b>Column2</b>
        </center>
      </td>
      <td>
        <center>
          <b>Column3</b>
        </center>
      </td>
      <td>
        <center>
          <b>Column4</b>
        </center>
      </td>
    </tr>
    <tr>
      <td>
        <span class="td_content yellow_marked">Cell content here</span>
      </td>
      <td>
        <span class="td_content yellow_marked">Cell content here</span>
      </td>
      <td>lirum</td>
      <td>larum</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Related Questions