如何正確對齊表格單元格中的div而不包裝？

Question

，我不能拿出一個妥善的解決辦法奇特的要求：

對於標有<div>表格單元格的內容，我怎麼能右對齊<div>同時防止整個小區從包裝？

這裏就是我有考慮：https://jsfiddle.net/c01y63k1/

table td:first-child { 
    white-space: nowrap; 
} 

table td:first-child > div { 
    margin-left: 1em; 
    display: inline-block; 
} 

<h2>This works:</h2> 
<table style="width: 200px"> 
    <tr> 
    <td> 
     Test test 
     <div> 
     float! 
     </div> 
    </td> 
    <td>Div with a lot of content</td> 
    </tr> 
</table> 

<h2>But...</h2> 
<p> 
Now my 'float!' is not right-aligned when there's extra space in the cell: 
</p> 

<table style="width: 500px"> 
    <tr> 
    <td> 
     Test test 
     <div> 
     float! 
     </div> 
    </td> 
    <td>Div with a lot of content</td> 
    </tr> 
</table> 

正如你所看到的，上面將工作當表格單元格的自動寬度將小於內容的展開寬度。但是，當表格單元格的寬度大於內容的寬度時，div將不會右對齊（因爲不是）。

在div上應用float: right將以與上述情況相反的方式工作。看到這裏：https://jsfiddle.net/ycutor3t/

table td:first-child { 
    white-space: nowrap; 
} 

table td:first-child > div { 
    margin-left: 1em; 
    display: inline-block; 
    float: right 
} 

<h2>This does not work:</h2> 
<table style="width: 200px"> 
    <tr> 
    <td> 
     Test test 
     <div> 
     float! 
     </div> 
    </td> 
    <td>Div with a lot of content</td> 
    </tr> 
</table> 

<h2>But... this does!</h2> 
<p> 
Now my 'float!' is right-aligned when there's extra space in the cell: 
</p> 

<table style="width: 500px"> 
    <tr> 
    <td> 
     Test test 
     <div> 
     float! 
     </div> 
    </td> 
    <td>Div with a lot of content</td> 
    </tr> 
</table> 

Answer 1

您可以使用Flexbox的

td:first-child { 
 
    display: flex; 
 
} 
 
td:first-child > div { 
 
    margin-left: auto; /* Push it to the right */ 
 
}

<table style="width: 500px"> 
 
    <tr> 
 
    <td> 
 
     Test test 
 
     <div>float!</div> 
 
    </td> 
 
    <td>Div with a lot of content</td> 
 
    </tr> 
 
</table>