5

現在サイトを作成しており、構文の強調表示と行番号を使用してタグをサポートする必要があり<pre>ます (そのために GitHub Gists を使用していますが、問題ありません)。

問題は、サイトがレスポンシブであり、テーブルのサイズを変更できるため、に静的widthプロパティを 割り当てることができないことです。<pre><td>

実際の例を見たい場合は、私が話していることを示すために作成した例を次に示します: http://jsfiddle.net/akashivskyy/jNRrn/。

どこにも移動したくない場合は、ここで簡単に説明します...

私の基本的なツリーは次のようになります。

<div class="file">
    <table class="source">
        <tr>
            <td class="lines">
                <span class="line-number">1</span>
                <span class="line-number">2</span>
                <span class="line-number">3</span>
            </td>
            <td class="code">
<pre>NSString *title = @"Title";
NSString *title2 = [title stringByAppendingString:@"This is a very very long string"];
NSLog(@"%@", title2);</pre>
            </td>
        </tr>
    </table>
</div>

そして非常に基本的な CSS:

.file {
    overflow: hidden;
    width:340px;
}

td.code pre {
    overflow: auto;
}

プロパティ<pre>がないため、機能しません。widthどういうわけかスクロールを許可する唯一の方法はoverflow: auto、.fileクラスに適用することです。

.file {
    overflow: auto;
    width:340px;
}

td.code pre {
    overflow: auto;
}

しかし、テーブル全体<td>がスクロールされており、行番号 (最初) を残したいので、これでは満足できません。

これで要点がわかりました。私の質問は次のとおりです。いくつかのトリッキーな類似スクリプトによって要素に静的プロパティを割り当てずに結果を達成する方法はありますか?width<pre>responsive.js

4

1 に答える 1

2

行番号をそのままにしておきたい場合は、それらを絶対位置に配置するのはどうですか? コードに適切なパディングを追加します。

/* your previous solution */
.file {
    overflow: auto;
    width:340px;
}
td.code pre {
    overflow: auto;
}
/* + add this */
td.lines {
    position:absolute;
}
td.code{
    padding-left:20px;
}
于 2013-05-10T09:18:43.257 に答える