0

これは私の最初の投稿です。以前に投稿された質問を検索して、私が遭遇したものと似ているように聞こえますが、それらの回答を試しましたが、まだ機能していません。

次のコードを取得しました。私が取り組んでいるものと多少似ています。

CSS:

.ContentTable {
    width:100%;
    heigth:100%;
    empty-cells:show;
}

.WidthLimited{
    overflow:scroll;
    overflow-x:auto;
    overflow-y:hidden;
}

.ResultListContainer{
    width:95%;
    color:black;    
}

HTML:

<div id="Wrapper">
    <div id="Content1"><div/> 
    <span id"SearchControl">
        <table class="ContentTable">
            <tbody>
                <tr id="Title">Title here</tr>              
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Footer">
                    <td>Some text</td>
                </tr>
            </tbody>
        </table>
    </span>

    <div id="ResultListWrapper" class="WidthLimited">
        <table class="ResultListContainer">
            <tbody>
                <tr id="Title">Title here</tr>              
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Footer">
                    <td>Some text</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

幅を調整できるように、次の JavaScript も取得しました。

function fn_wrapperResultList()
{
    var wObj = document.getElementById("ResultListWrapper");
    var pObj = document.getElementById("SearchControl");

    if(window.attachEvent) 
    {                
        if(pObj.offsetWidth>wObj.offsetWidth)
        {
            wObj.style.width=pObj.offsetWidth; 
        }
    }
    else
    {
        wObj.style.width='100%'; 
    }
}

本質的に、私が達成しようとしているのは、ResultList の幅 (この場合は SearchControl よりも広い) を調整し、前者の幅が後者の幅よりも大きい場合に SearchControl の幅と一致させることです (ResultList.width > SearchControl幅を調整します）。

WidthLimited クラスに固定幅を割り当てると、コントロールが変更され、scroll-x が問題なく表示され、期待どおりに動作しますが、SearchControl に従って変更しようとしています。

私は多くのことを試しました: getComputedStyle を使用して幅を計算し、その JavaScript コードで wObj.style.width に割り当てます。をクラスに追加しましたdisplay:inline-block;が、何も追加しませんでした。.WidthLimitedスパンには実際には特定の幅がないことを読みましたが、この時点でその部分を変更することは実際にはオプションではありません.

私が意図したことを達成する方法はありますか？

4

2 に答える 2

0

@Chopper 最初の [jsFiddle] ( http://jsfiddle.net/CsYVE/35/ ) に変更を加えましたが、幸いなことに現在動作しています! 結果のスクリプトは次のようになります。

var searchControl = $('#SearchControl'); 
var resultList = $('#ResultListWrapper'); 

if (resultList.width() > searchControl.width()) 
    resultList.width(searchControl.width());

これは IE9、Chrome、FF、Opera で問題なく動作します

于 2013-09-13T15:17:50.783 に答える
0

この jsFiddleを見てください。それはあなたが求めているものですか？

var searchControl = $('#SearchControl');
var resultList = $('#ResultListContainer');
if (searchControl.width() > resultList.width())
    resultList.width(searchControl.width());

jQuery に慣れていない場合は、こちらをご覧ください。理想的には、CSS でレイアウトを行い、本当に必要な場合にのみ JavaScript を使用する必要があります。何をしようとしているのかをもう少し具体的に説明していただければ、CSS ベースのソリューションを見つけるお手伝いができます。idまた、とclass属性の違いにも注意する必要があります。概要はこちらをご覧ください。それが役立つことを願っています。

于 2013-09-13T05:26:49.013 に答える