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-blockand widths または block and floats のいずれかを使用する必要があります。

ただし、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 に答える