CODEWITHSUNDEEP
htmlcss
AKor
AKor

Reputation: 8892

Vertical Alignment of text in a table cell

Here's a portion of my table (it's a form):

Those are just two <td>'s in a <tr>. I'm trying to get Description up top, to the top of the table cell, rather than resting on the bottom.

How can I do that?

Upvotes: 109

Views: 296896

Answers (7)

A.S.Abir
A.S.Abir

Reputation: 99

CSS {vertical-align: top;} or html Attribute {valign="top"}

.table td, 
.table th {
    border: 1px solid #161b21;
    text-align: left;
    padding: 8px;
    width: 250px;
    height: 100px;
    
    /* style for table */
}

.table-body-text {
  vertical-align: top;
}
<table class="table">
    <tr>
      <th valign="top">Title 1</th>
      <th valign="top">Title 2</th>
    </tr>
    <tr>
      <td class="table-body-text">text</td>
      <td class="table-body-text">text</td>
    </tr>
   </table>

For table vertical-align we have 2 options.

  1. is to use css {vertical-align: top;}
  1. another way is to user attribute "valign" and the property should be "top" {valign="top"}

Upvotes: 2

morgar
morgar

Reputation: 2407

valign="top" should do the work.

<tr>
  <td valign="top">Description</td>
</tr>

Upvotes: 10

DTS
DTS

Reputation: 119

Try 

td.description {
  line-height: 15px
}
<td class="description">Description</td>

Set the line-height value to the desired value.

Upvotes: 10

Manoj
Manoj

Reputation: 2216

Just add vertical-align:top for first td alone needed not for all td.

tr>td:first-child {
  vertical-align: top;
}
<tr>
  <td>Description</td>
  <td>more text</td>
</tr>

Upvotes: 3

clairesuzy
clairesuzy

Reputation: 27664

td.description {vertical-align: top;}

where description is the class name of the td with that text in it

td.description {
  vertical-align: top;
}
<td class="description">Description</td>

OR inline (yuk!)

<td style="vertical-align: top;">Description</td>

Upvotes: 156

Richard
Richard

Reputation: 2148

If you are using Bootstrap, please add the following customised style setting for your table:

.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th {
      vertical-align: middle;
 }

Upvotes: 7

Razzi
Razzi

Reputation: 29

I had the same issue but solved it by using !important. I forgot about the inheritance in CSS. Just a tip to check first.

Upvotes: 2

Related Questions