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和旧的HTML。

Answer 2

您可以在vertical-align:super内span上使用.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

.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 */ }有效。

＆＃13;

＆＃13;

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

＆＃13;

 yum install java-1.7.0-openjdk

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以将黄色背景添加到td。然后在span元素上使用负边距。

fiddle

＆＃13;

＆＃13;

.td_content {}

.yellow_marked {
  background-color: yellow;
}

.yellow_marked span {
  display: block;
  margin-top: -4px;
}

table {
  border: 1px solid black;
}

td {
  border: 1px solid;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;