dwóch kolumnach tabeli: jedna była jak najmniejsza, druga zajmuje się resztą

Question

Mam tabeli do-kolumn w div:

<div> 
<table> 
    <tbody> 
    <tr> 
     <td class="action" > 
     <a> ✔ </a> 
     </td> 
     <td class="content"> 
     <p>Bigger text...(variable size).......</p> 
     </td> 
    </tr> 
    <tr> 
     <td class="action" > 
     <a> ✔ </a><a> ✘ </a> 
     </td> 
     <td class="content"> 
     <p>Bigger text...(variable size).......</p> 
     </td> 
    </tr> 
     ... same structure in all the table 
    </tbody> 
</table> 
</div> 

I chciałbym kolumnie „Akcja”, aby dopasować zawartość, i kolumna "treści", aby przejąć resztę dostępnego miejsca. Kolumna "akcja" będzie wyglądać lepiej z wyrównaniem do prawej. Tabela powinna również zmieścić się w 100% szerokości kontenera.

Czy można to zrobić bez ustalania szerokości kolumn?

Próbowałem z tym:

table .action 
{ 
    width:auto; 
    text-align:right; 
} 
table 
{ 
    border-collapse:collapse; 
    border-spacing:0; 
    width:100%; 
} 

Ale kolumna lewa bierze połowę stołu ...

Answer 1

Nadanie treść td 100% szerokość zmusi go do podjęcia tak dużo miejsca jak to może, więc .content{ width: 100% } powinien działać.

Podaj także .action a white-space: nowrap, aby upewnić się, że znak x i znacznik wyboru pozostają obok siebie. W przeciwnym razie treść będzie w stanie zabrać jeszcze więcej miejsca i wymusić ikony poniżej siebie.

table .action 
 
{ 
 
    width:auto; 
 
    text-align:right; 
 
    white-space: nowrap 
 
} 
 
table .content { 
 
    width: 100% 
 
} 
 
table 
 
{ 
 
    border-collapse:collapse; 
 
    border-spacing:0; 
 
    width:100%; 
 
    border: 1px solid 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td class="action" > 
 
     <a> ✔ </a> 
 
     </td> 
 
     <td class="content"> 
 
     <p>Bigger text...(variable size).......</p> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="action" > 
 
     <a> ✔ </a><a> ✘ </a> 
 
     </td> 
 
     <td class="content"> 
 
     <p>Bigger text...(variable size).......</p> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

Znalazłem odpowiedź, kiedy staramy się o jedną kolumnę z wielu jak najmniejsza.

Podanie zawartości td a 1% width zmusi ją do podjęcia tak mało miejsca, jak to możliwe, więc .content{ width: 1% } pracował dla mnie.

Answer 3

ustawić kolumnę width: 1px & white-space: nowrap.

ten postara się zrobić to 1px ale nowrap zatrzyma go z coraz mniejszy niż najszerszym elementem w tej kolumnie