HTML

Question

我希望 table 单元格中的文本位置稍高一些，靠近顶部。请查看提供的屏幕截图。您可以在第 1 列下方的 TD 中看到我希望它看起来像什么：

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 的新手...有点震惊一些简单的样式竟然如此复杂。

我的第一个猜测是单元格内的文本对齐...垂直对齐？没用。然后我尝试在具有相对定位的元素中使用具有绝对定位的元素。它确实有效……几乎……但文本确实从单元格中流出。

如果你能告诉我解决这个（容易？）任务的正确方向，我将不胜感激。

编辑：

我想将黄色条保持在同一位置，但我想将条内的文本向上移动。

Answer 1

你可以在 span 里面（在 .td-content 上）使用 vertical-align:super

请参阅下面的代码段或 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 2

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 3

您可以将黄色背景添加到 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>

Answer 4

从评论看来，您希望将黄色条保持在同一位置，但您希望将其中的文本向上移动。这并不难，但确实涉及添加额外的标记；否则不可能以这种方式将文本与背景分开。所以，给你。

.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，但您使用 non-semantic 标记作为标题和列 headers，更不用说过时和不必要的元素了；舍不得把那些留在里面。

如果需要，您可以将新 CSS 与旧 HTML 一起使用。

HTML - Table - 单元格内的垂直位置文本

HTML - Table -vertical position text within cell

css

html-table

vertical-alignment