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
Bewerkt door cor-el op
Gekozen oplossing
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
Dit antwoord in context lezen 👍 0Alle antwoorden (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
Bewerkt door cor-el op
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;}
Gekozen oplossing
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