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是内联元素。要做你想做的事，你需要把它变成一个块元素。此时，您需要使用inline-block和宽度或块和浮点数。

你可以使用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

Answer 2

将span更改为div，因为span是div是块元素的内联元素。

HTML：

<table>
  <tr>
      <td>Text 1 <div class="try">Other text 1</div></td>
      <td>Text 2 <div class="try"></div></td>
  </tr>
</table>

CSS：

table 
{ 
    border-collapse:collapse;
}
td
{
    border:solid 1px black;
    padding:5px;
    width:200px;
}
.try
{
    border-bottom:dotted 1px red;
    width: 150px;
    height: 15px;
    float: right;
}

Fiddle Link

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

2 个答案: