下面是我表格的一部分(它是一个表单) :
那只是 <tr>里的两个 <td>。我试着把 描述放在表格的顶部,而不是放在底部。
<tr>
<td>
我该怎么做?
td.description {vertical-align: top;}
where description is the class name of the td with that text in it
description
td
td.description { vertical-align: top; }
<td class="description">Description</td>
OR inline (yuk!)
<td style="vertical-align: top;">Description</td>
valign="top" should do the work.
valign="top"
<tr> <td valign="top">Description</td> </tr>
Try
td.description { line-height: 15px }
Set the line-height value to the desired value.
I had the same issue but solved it by using !important. I forgot about the inheritance in CSS. Just a tip to check first.
!important
CSS
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; }
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>
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.