Html 如何使用省略号获得流体表？

假设我有一个有两列的表，我希望右边的列宽是表单元格中内容的大小，左边的列宽是尽可能宽的。我还希望左列不要换行并显示省略号

我在这里创建了一个JSFIDLE示例

.家长{
显示：表格；
表布局：固定；
宽度：100%；
}
.左栏{
显示：表格单元格；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.右栏{
文本对齐：右对齐；
显示：表格单元格；
}
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
右栏

我遇到的问题是让左列尽可能宽。 如果我删除css表格布局：固定；省略号没有按预期工作

---

如何使用省略号获得流体表

我所做的是添加了一个带有内部块样式的段落元素。然后，我使用jQuery迭代右列中的所有元素，测量它们的最大宽度。然后我为列指定了最大宽度

您可以在这个JSFIDLE链接下找到我的解决方案

$（函数（）{
var maxWidth=0；
//浏览右栏中的每一段，找出最宽的值。
$（“.inner段落”）.each（函数（）{
如果（maxWidth<$（this）.width（））{
maxWidth=$（this.width（）；
}
});
//为列指定最大宽度
$（“.right column”）.width（最大宽度）；
});
.桌子{
显示：表格；
表布局：固定；
宽度：100%；
}
.行{
显示：表格行；
}
.左栏{
显示：表格单元格；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.右栏{
文本对齐：右对齐；
显示：表格单元格；
}
.内段{
显示：内联块；
}
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
右栏

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
右栏加宽

<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>

<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>