There is a fixed-width table consisting of two columns. It is necessary to set with the help of css: the width of the left column - by content, the width of the right - the remainder (the width of the table is the width of the first column) and, if necessary, trim the text. I tried

.table { width: 100%; table-layout: fixed; } .table td:last-child { text-align: right; text-overflow: ellipsis; overflow: hidden; }

In this case, the text in the cells "clashes" on each other. Tried other ways (without table-layout: fixed) - the width of the table increases. That is, we need this option:

 Column1 | Column2 Foo BarBar Column1 | Co2 Foooooooooo B...

    2 answers 2

    If I correctly suspect that the column, which by its content, should not contain multi-line text, this is done like this:

     table { width: 100%; } tr :first-child { width: 0; white-space: nowrap; } tr :last-child { width: 100%; } 
     <table> <tr> <th>ΠŸΠ΅Ρ€Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° <th>Вторая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° </tr><tr> <td>Какая-Ρ‚ΠΎ ΠΌΠ΅Ρ‚ΠΊΠ° <td>Π•ΡΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Π° фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹, состоящая ΠΈΠ· Π΄Π²ΡƒΡ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. НСобходимо с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css Π²Ρ‹ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ: ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ - ΠΏΠΎ содСрТимому, ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΏΡ€Π°Π²ΠΎΠΉ - остаток (ΡˆΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ - ΡˆΠΈΡ€ΠΈΠ½Π° ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ) ΠΈ Ссли Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ тСкст. ΠŸΡ€ΠΎΠ±ΠΎΠ²Π°Π» </tr> </table>

    Oops .. I did not notice that the ellipsis is necessary. Then so:

     table { width: 100%; line-height: 1.5em; } tr > :first-child { width: 0; white-space: nowrap; vertical-align: top; } tr > :last-child { width: 100%; position: relative; vertical-align: top; } tr > :last-child > div { position: absolute; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 
     <table> <tr> <th>ΠŸΠ΅Ρ€Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° <th>Вторая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° </tr><tr> <td>Какая-Ρ‚ΠΎ ΠΌΠ΅Ρ‚ΠΊΠ° <td><div>Π•ΡΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Π° фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹, состоящая ΠΈΠ· Π΄Π²ΡƒΡ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. НСобходимо с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css Π²Ρ‹ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ: ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ - ΠΏΠΎ содСрТимому, ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΏΡ€Π°Π²ΠΎΠΉ - остаток (ΡˆΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ - ΡˆΠΈΡ€ΠΈΠ½Π° ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ) ΠΈ Ссли Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ тСкст. ΠŸΡ€ΠΎΠ±ΠΎΠ²Π°Π»</div> </tr> </table>

      The only thing that came to mind was to imitate the behavior of the table with divs. That is: html:

       <div class="table"> <div class="tr clearfix"> <div class="td">Very-Very Big Content</div> <div class="td">Content</div> </div> </div>

      css:

       .clearfix {*zoom: 1;} .clearfix:before, .clearfix:after {display: table; line-height: 0; content: ' ';} .clearfix:after {clear: both;} .table { width: 100%; display: table; } .table .tr {display: table-row; background: #bbb;} .table .tr .td {display: table-cell; padding: 3px;} .table .tr .td:last-child { text-align: right; text-overflow: ellipsis; overflow: hidden; max-width: 60px; /* Π½Ρƒ это Π½Π° своС усмотрСниС, СстСствСнно */ }