TROUBLE WITH MAX-LENGTH
code:
td {word-wrap:break-word; max-width:8ch;font-family:Courier New} red {color:red} <table> <tr><td> <td>♠<span contenteditable="true" id='NS' spellcheck="false"></span> <br><red>♥<span contenteditable="true" id='NH' spellcheck="false"></span></red></td></tr></table>
works fine in try-it editor, but fails in my HTML. Will upload HTML if I can
cor-el மூலமாக
தீர்வு தேர்ந்தெடுக்கப்பட்டது
Your question refers to max-length but I'm not sure how that relates to your code.
If you meant max-width and the problem is that a table cell doesn't comply with set dimensions, you need to override the default "stretch-to-fit" behavior of tables by adding this to your CSS:
table { table-layout: fixed; }
See: https://developer.mozilla.org/docs/Web/CSS/table-layout
Read this answer in context 👍 0All Replies (3)
Will be long, but here goes:
table {maximum-width:2.5in; border-collapse: collapse; margin:auto; border:1px solid black}} td {word-wrap:break-word; max-width:8ch;} body {font-family:Courier New; font-size:10pt;} <table> <colgroup><col span='3' style="width:.8in;max-width:.8in"></colgroup> <tr> <td class='T'>Board <span id='HB'></span> <br>Dealer <span id='HD'></span> <br>Vul <span id='HV'></span></td> <td>♠<span contenteditable="true" id='NS' spellcheck="false"></span> <br><red>♥<span contenteditable="true" id='NH' spellcheck="false"></span> <br>♦<span contenteditable="true" id='ND' spellcheck="false"></span></red> <br>♣<span contenteditable="true" id='NC' spellcheck="false"></span></td> <td></td></tr> <tr> <td>♠<span contenteditable="true" id='WS' spellcheck="false"></span> <br><red>♥<span contenteditable="true" id='WH' spellcheck="false"></span> <br>♦<span contenteditable="true" id='WD' spellcheck="false"></span></red> <br>♣<span contenteditable="true" id='WC' spellcheck="false"></span></td> <td><table style='width:100%'> <tr> <td colspan='2' class='C'>N</td></tr> <tr> <td class='L'>W</td> <td class='R'>E</td></tr> <tr> <td colspan='2' class='C'>S</td></tr></table></td> <td>♠<span contenteditable="true" id='ES' spellcheck="false"></span> <br><red>♥<span contenteditable="true" id='EH' spellcheck="false"></span> <br>♦<span contenteditable="true" id='ED' spellcheck="false"></span></red> <br>♣<span contenteditable="true" id='EC' spellcheck="false"></span></td></tr> <tr> <td></td> <td>♠<span contenteditable="true" id='SS' spellcheck="false"></span> <br><red>♥<span contenteditable="true" id='SH' spellcheck="false"></span> <br>♦<span contenteditable="true" id='SD' spellcheck="false"></span></red> <br>♣<span contenteditable="true" id='SC' spellcheck="false"></span></td> <td></td></tr> </table>
try entering AKQJ1098765432 in field
cor-el மூலமாக
Try this for a table and td elements:
table { display:inline-block; max-width:2.5in; border-collapse: collapse; margin:auto; border:1px solid black} td {word-wrap:break-word; max-width:1in;}
தீர்வு தேர்ந்தெடுக்கப்பட்டது
Your question refers to max-length but I'm not sure how that relates to your code.
If you meant max-width and the problem is that a table cell doesn't comply with set dimensions, you need to override the default "stretch-to-fit" behavior of tables by adding this to your CSS:
table { table-layout: fixed; }
See: https://developer.mozilla.org/docs/Web/CSS/table-layout