html - 将放置在其他元素之后的 SPAN 扩展到其容器的右边界

Question

我有一个包含 2 列的表格。在每一个中都存在一个简单的文本和另一个包裹在 SPAN 中的句子。表格列的宽度是固定的，显然文本的长度是完全随机的。我想将跨度宽度“扩展”到单元格表格的右边距。

<table>
  <tr>
      <td>Text 1 <span>other text 1</span></td>
      <td>Text 2 <span>other text 2</span></td>
  </tr>
</table>

和CSS规则:

td
{
    border:solid 1px black;
    padding:5px;
    width:200px;
}

span
{
    border-bottom:dotted 1px red;
}

这是一个 JSFiddle Example .

如您所见，SPAN 下的红色虚线边框仅在文本下......我想将它扩展到每个单元格的右边距，所以我正在寻找一种方法来从其初始位置扩展跨度长度(取决于前面的黑色文本)到容器的右边距。

在某些方面是否可行？

Answer 1

spans 是内联元素。要做你想做的事，你需要把它变成一个 block 元素。那时，您需要使用 inline-block 和宽度或 block 和 float 。

但是您可以使用 JS 来执行此操作:

$(document).ready(function() {
  var containerWidth = $('table td').width();
  var textWidth = $('span:first-child').width();
  var newWidth = containerWidth - textWidth;
  $('span.second').css('width',newWidth);
});

http://codepen.io/anon/pen/EyJFA