0

2 つの列を持つテーブルがあるとします。右の列の幅をテーブル セル内のコンテンツのサイズにし、左の列の幅をできるだけ広くしたいと考えています。また、左の列は改行せずに省略記号を表示したいと思います。

ここでjsfiddleの例を作成しましたhttp://jsfiddle.net/fTd8m/

<style type="text/css">
.parent{
    display:table;
    table-layout:fixed;
    width:100%;
}
.left-column{
    display:table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}
.right-column{
    text-align:right;
    display:table-cell;
}
</style>

<div class="parent">
    <div class="left-column">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="right-column">
        Right Column
    </div>
</div>

私が抱えている問題は、左の列をできるだけ広くすることです。css table-layout:fixed; を削除すると、省略記号は期待どおりに機能しません。

Fluid テーブルを省略記号で動作させるにはどうすればよいですか?

4

1 に答える 1

0

私がしたことは、inner-block でスタイルされた段落要素を追加することでした。次に、jQuery を使用して、右側の列のすべての要素を反復処理し、それらの最大幅を測定しました。次に、列に最大幅を割り当てました。

このjsfiddleリンクhttp://jsfiddle.net/jvgRV/の下で私のソリューションを見つけることができます

<script type="text/javascript">
$(function() {
    var maxWidth = 0;
    //go through each paragraph in the right column and find the widest value.
    $(".innerParagraph").each(function() {
        if(maxWidth < $(this).width()){
            maxWidth = $(this).width();
        }
    });
    // assign max width to column
    $(".right-column").width(maxWidth);
});
</script>

<style type="text/css">
.table{
    display:table;
    table-layout:fixed;
    width:100%;
}
.row{
    display:table-row;
}
.left-column{
    display:table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}
.right-column{
    text-align:right;
    display:table-cell;
}
.innerParagraph{
    display:inline-block;   
}
</style>

<div class="table">
    <div class="row">
        <div class="left-column">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="right-column">
            <p class="innerParagraph">Right Column</p>
        </div>
    </div>
    <div class="row">
        <div class="left-column">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="right-column">
            <p class="innerParagraph">Right Column wider</p>
        </div>
    </div>
</div>
于 2013-10-06T19:19:56.243 に答える