Editing Help/Tables (section)

=== Note about large tables (noresize class) === <!--T:463-->
</translate>
<translate><!--T:464--> The use of the wrapping <tvar name=1><code>div.noresize</code></tvar> will ensure your table is optimized for mobile and is extremely important for large tables e.g. tables with more than 4 columns or large columns.</translate>
<translate><!--T:465--> Failure to use this element will cause your content to overlap UI elements e.g. the Vector 2022 sidebar or to break mobile display.</translate>
<translate><!--T:466--> This will cause the table to have a horizontal scroll bar when the table is too big for the content.</translate>

<translate>
<!--T:467-->
You type:
</translate>

<pre>
<div class="noresize">
{| class="wikitable"
! colspan="6" |Shopping List
|-
| rowspan="2" |Areallyreallyreallyreallylongstringwillcauseyourtableto 
| Pie
| Buns
| Danish
| colspan="2" |Croissantsmaycausetexttoincreasethesizeofyourcolumnsoitbreaksoutofthecontent area if you do not wrap the table with noresize.
|-
| Cheese
| colspan="2" |Ice cream
| Butter
| Yogurt
|}
</div>
</pre>

<translate>
<!--T:468-->
You get:</translate>
<div class="noresize">
{| class="wikitable"
! colspan="6" |Shopping List
|-
| rowspan="2" |Areallyreallyreallyreallylongstringwillcauseyourtableto 
| Pie
| Buns
| Danish
| colspan="2" |Croissantsmaycausetexttoincreasethesizeofyourcolumnsoitbreaksoutofthecontent area if you do not wrap the table with noresize.
|-
| Cheese
| colspan="2" |Ice cream
| Butter
| Yogurt
|}
</div>

<translate>