css - 具有背景的 Div 匹配文本高度

Question

注意:IE 8+ 是必须的:-(

我现在拥有的，

这就是我想要的，

关于部分

<div style="background-color: red;height: 20px;width: 10px; ...

这就是我正在尝试的 - https://jsfiddle.net/w3tjbvef/3/

<table id="sometable" style="display: table;">
  <tbody>
    <tr class="s-row">
      <td>Name</td>
      <td>:</td>
      <td>Name With Colour Yellow 1</td>
    </tr>
    <tr class="t-row">
      <td>Tag</td>
      <td>:</td>
      <td>
        <div style="vertical-align: middle;">
          <div style="background-color: red;height: 20px;width: 10px;/* margin-top: 10px; */display: inline-block;"></div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
      </td>
    </tr>
    <tr class="time-row">
      <td>Column3</td>
      <td>:</td>
      <td>
        <div>111111111</div>
      </td>
    </tr>
    <tr class="owner-row">
      <td>Column 4</td>
      <td>:</td>
      <td>
        <div>asdasd</div>
      </td>
    </tr>
    <tr class="desc-row">
      <td>Column 5</td>
      <td>:</td>
      <td>
        <div>Bag With Colour Yellow 1</div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

<table id="sometable" style="display: table;">
  <tbody>
    <tr class="s-row">
      <td>Name</td>
      <td>:</td>
      <td>Name With Colour Yellow 1</td>
    </tr>
    <tr class="t-row">
      <td>Tag</td>
      <td>:</td>
      <td>

          <div style="border-left: 10px solid red;padding-left: 10px;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
      </td>
    </tr>
    <tr class="time-row">
      <td>Column3</td>
      <td>:</td>
      <td>
        <div>111111111</div>
      </td>
    </tr>
    <tr class="owner-row">
      <td>Column 4</td>
      <td>:</td>
      <td>
        <div>asdasd</div>
      </td>
    </tr>
    <tr class="desc-row">
      <td>Column 5</td>
      <td>:</td>
      <td>
        <div>Bag With Colour Yellow 1</div>
      </td>
    </tr>
  </tbody>
</table>

<td>

          <div style="border-left: 10px solid red; padding-left: 10px;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
      </td>

我会创建一个类并添加它而不是内联样式。