HTML - 表格 - 單元格內的垂直位置文本

Question

我希望表格單元格內的文本位置靠近頂部，位置稍高。請看看提供的截圖。您可以在下面的第1列的TD看我怎麼想它看起來像：

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; 
} 

我對於HTML和CSS來說是新的......並且有點震驚有多複雜一些簡單的造型可以。

我的第一個猜測是單元格內的文本對齊... vertical-align？沒有工作。 然後我嘗試在具有相對定位的元素中使用具有絕對定位的元素。它確實有效......幾乎......但文本確實流出了單元格。

如果您能告訴我解決這個（簡單？）任務的正確方向，我將不勝感激。

編輯：

我想保持在同一個位置上的黃色吧，但我想向上移動酒吧內的文本。

Answer 1

似乎從你想保持在同一個位置上的黃色條評論，但你要在文本中它向上移動。這並不難，但確實需要增加額外的標記;否則就不可能以這種方式將文本從背景中分離出來。所以，你走了。

.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>

而且，我對改變你的HTML抱歉，但你正在使用非語義標記爲標題和列標題，更不用提過時和不必要的元素;不忍離開那些英寸

如果你想，你可以使用舊的HTML雖然新的CSS。

Answer 2

您可以在span內使用vertical-align:super（上.td-content）

看到片斷低於或jsFiddle

讓我知道，如果這是你想要的

.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>

Answer 3

vertical-align:top的作品。

.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>

Answer 4

您可以在黃色背景添加到td代替。然後在span元素上使用負邊距。

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>