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 的新手……对一些简单的样式如此复杂感到有点震惊。

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

如果您能告诉我解决这个(简单？)任务的正确方向，我将不胜感激。

编辑:

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

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，但您对标题和列标题使用了非语义标记，更不用说过时和不必要的元素了；不忍心把那些留在里面。

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