サイドセルと調整可能な中央セルの最小幅で調整可能なテーブルを作るにはどうすればいいですか

Question

3列のテーブルを作成する必要があり、サイドカラムはコンテンツを表示するための最小幅を持つ必要があります。

テーブルの幅がコンテナの幅に達する場合、中央の列のテキストを省略記号で切り捨てる必要があります。しかし、中央の列の内容が短い場合、列も短く、右側の列は中央の内容に近いはずです。

以下に私の2つの異なる解決策があります。残念ながら、どちらも私にとって完璧ではありません。 3行目のこれ挙動

が正しくありません - 右側の列の内容は、中央の列の近くのコンテンツはありません：スペースせずに、この一つのテキストで https://jsfiddle.net/rqLsdvwd/4/

.main { 
 
    display: table; 
 
    white-space: nowrap; 
 
} 
 

 
.box { 
 
    display: table-cell; 
 
    padding: 5px; 
 
} 
 

 
.sidebar { 
 
    width: 1%; 
 
    background-color: green; 
 
} 
 

 
.content { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    max-width: 0px; 
 
    background-color: yellow; 
 
}

<div style="width:600px"> 
 

 
    <div class="main"> 
 
    <div class="box sidebar">Short info 1</div> 
 
    <div class="box content">Long Information with spaces Long Information with spaces Long Information with spaces Long Information with spaces</div> 
 
    <div class="box sidebar">Short info 2</div> 
 
    </div> 
 
    
 
    <div class="main"> 
 
    <div class="box sidebar">Short info 1</div> 
 
    <div class="box content">LongInformationWithoutSpacesLongInformationWithoutSpacesLongInformationWithoutSpacesLongInformationWithoutSpaces</div> 
 
    <div class="box sidebar">Short info 2</div> 
 
    </div> 
 
    
 
    
 
    <div class="main"> 
 
    <div class="box sidebar">Short info 1</div> 
 
    <div class="box content">Short info 2</div> 
 
    <div class="box sidebar">Short info 3 which should be near Short info 2</div> 
 
    </div> 
 
    
 
</div>

切り捨てられません。 https://jsfiddle.net/7gbux944/3/

.main { 
 
    width:600px; 
 
} 
 

 
.sidebar { 
 
    background-color: green; 
 
    white-space: nowrap; 
 
} 
 

 
.content::after { 
 
    content: attr(title); 
 
    display: inline-block; 
 
    height: 0px; 
 
    overflow: hidden; 
 
} 
 

 
.content::before { 
 
    content: attr(title); 
 
    position: absolute; 
 
    max-width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.content { 
 
    position: relative; 
 
    background-color: yellow; 
 
}

<div class="main"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <div class="sidebar">Short info1</div> 
 
     </td> 
 
     <td> 
 
     <div><span class="content" title="Long Information with spaces Long Information with spaces Long Information with spaces Long Information with spaces"></span></div> 
 
     </td> 
 
     <td> 
 
      <div class="sidebar">Short info1</div> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <div class="sidebar">Short info1</div> 
 
     </td> 
 
     <td> 
 
     <div><span class="content" title="LongInformationWithoutSpacesLongInformationWithoutSpacesLongInformationWithoutSpacesLongInformationWithoutSpaces"></span></div> 
 
     </td> 
 
     <td> 
 
      <div class="sidebar">Short info1</div> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <div class="sidebar">Short info1</div> 
 
     </td> 
 
     <td> 
 
     <div><span class="content" title="Short info2"></span></div> 
 
     </td> 
 
     <td> 
 
      <div class="sidebar">Short info3</div> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

誰もが、私に何かをしてくださいお勧めてもらえますか？

Answer 1

これは実際には独立した一連の行を組み合わせたテーブルではありません。

ただし、フレキシボックスは

.parent { 
 
    width: 600px; 
 
    margin: 1em auto; 
 
} 
 
.main { 
 
    display: flex; 
 
    margin-bottom: 1em; 
 
} 
 
.box { 
 
    flex: 0 0 auto; 
 
    padding: 5px; 
 
} 
 
.sidebar { 
 
    background-color: green; 
 
} 
 
.content { 
 
    flex: 0 1 auto; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    background-color: yellow; 
 
}

<div class="parent"> 
 

 
    <div class="main"> 
 
    <div class="box sidebar">Short info 1</div> 
 
    <div class="box content">Long Information with spaces Long Information with spaces Long Information with spaces Long Information with spaces</div> 
 
    <div class="box sidebar">Short info 2</div> 
 
    </div> 
 
    <div class="main"> 
 
    <div class="box sidebar">Short info 1</div> 
 
    <div class="box content">LongInformation</div> 
 
    <div class="box sidebar">Short info 2</div> 
 
    </div> 
 
</div>

注意は、しかし、これは表のように行動しないということを行うことができます。各行のさまざまな「セル」の幅は、他の行の同じ「セル」には関係しません。