दो कॉलम तालिका: संभव के रूप में एक के रूप में छोटे, अन्य एक div में एक करने के लिए कॉलम तालिका बाकी

Question

मेरे पास ले जाता है:

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

और मैं "कार्रवाई" स्तंभ की तरह सामग्री फिट करने के लिए होता है, और बाकी सामग्री उपलब्ध कराने के लिए "सामग्री" कॉलम। "क्रिया" कॉलम दाएं संरेखण के साथ बेहतर दिखाई देगा। तालिका को कंटेनर की चौड़ाई के 100% फिट भी होना चाहिए।

कॉलम चौड़ाई को ठीक किए बिना ऐसा करने का कोई तरीका है?

मैं इस के साथ करने की कोशिश की:

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

लेकिन बाएँ कॉलम तालिका के आधे लेता है ...

Answer 1

सामग्री td एक 100% चौड़ाई यह जितना अंतरिक्ष लेने के लिए यह बाध्य करेगा देते कर सकते हैं, तो .content{ width: 100% } काम करना चाहिए।

यह सुनिश्चित करने के लिए x और चेकमार्क एक-दूसरे के बगल में रहने के लिए white-space: nowrap पर प्रतिक्रिया दें। अन्यथा सामग्री एक और स्थान ले जाने और एक दूसरे के नीचे आइकन को मजबूर करने में सक्षम हो जाएगा।

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

मैं इस सवाल का जवाब जब कई संभव के रूप में के रूप में छोटे से एक स्तंभ बनाने की कोशिश कर पाया।

सामग्री देना td एक 1% width इसे जितना संभव हो उतना छोटा स्थान लेने के लिए मजबूर करेगा, इसलिए .content{ width: 1% } मेरे लिए काम किया।

Answer 3

कॉलम width: 1px & white-space: nowrap सेट करें।

यह सुनिश्चित करने के लिए कोशिश करेंगे यह 1px लेकिन nowrap उस स्तंभ