0

我有一个有 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示例。

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

在某些方面可能吗？

4

2 回答 2

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

于 2013-08-08T13:48:58.063 回答
0

更改span为divasspan是一个内联元素，而它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;
}

小提琴链接

于 2013-08-08T14:08:50.897 回答