https://wiki.planetoid.info/index.php?action=history&feed=atom&title=Table_with_many_columns
Table with many columns - Revision history
2026-06-15T23:29:33Z
Revision history for this page on the wiki
MediaWiki 1.39.6
https://wiki.planetoid.info/index.php?title=Table_with_many_columns&diff=23069&oldid=prev
Unknown user at 16:36, 29 June 2022
2022-06-29T16:36:29Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 00:36, 30 June 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>如何設計許多欄位的表格</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>如何設計許多欄位的表格</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>== <del style="font-weight: bold; text-decoration: none;">Design </del>==</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>== <ins style="font-weight: bold; text-decoration: none;">Consideration </ins>==</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* 使用者是否需要這麼多的欄位？只顯示主要欄位，點選該列資料才顯示完整細節資訊<ref>What to do with too many columns in a table? - User Experience Stack Exchange https://ux.stackexchange.com/questions/95855/what-to-do-with-too-many-columns-in-a-table</ref>。</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* 使用者是否需要這麼多的欄位？只顯示主要欄位，點選該列資料才顯示完整細節資訊<ref>What to do with too many columns in a table? - User Experience Stack Exchange https://ux.stackexchange.com/questions/95855/what-to-do-with-too-many-columns-in-a-table</ref>。</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* 如果是複雜的資料，則建議將資料切割成多個檢視 (view) 可以查看子集合的資料 <ref>UI Patterns for tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/28090/ui-patterns-for-tables-with-many-columns</ref>。</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* 如果是複雜的資料，則建議將資料切割成多個檢視 (view) 可以查看子集合的資料 <ref>UI Patterns for tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/28090/ui-patterns-for-tables-with-many-columns</ref>。</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l7">Line 7:</td>
<td colspan="2" class="diff-lineno">Line 7:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></ref><ref>Tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/117550/tables-with-many-columns?newreg=fdf5edeeca6a4cfba3f056107cbbed17 "Don’t make it responsive, make it adaptive!"</ref>。</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></ref><ref>Tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/117550/tables-with-many-columns?newreg=fdf5edeeca6a4cfba3f056107cbbed17 "Don’t make it responsive, make it adaptive!"</ref>。</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">== Design ideas ==</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">* [https://codepen.io/search/pens?q=Responsive+Tables CodePen Search: Responsive Tables]</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== References ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== References ==</div></td></tr>
</table>
Unknown user
https://wiki.planetoid.info/index.php?title=Table_with_many_columns&diff=23068&oldid=prev
Unknown user at 16:13, 29 June 2022
2022-06-29T16:13:49Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 00:13, 30 June 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l4">Line 4:</td>
<td colspan="2" class="diff-lineno">Line 4:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* 使用者是否需要這麼多的欄位？只顯示主要欄位，點選該列資料才顯示完整細節資訊<ref>What to do with too many columns in a table? - User Experience Stack Exchange https://ux.stackexchange.com/questions/95855/what-to-do-with-too-many-columns-in-a-table</ref>。</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* 使用者是否需要這麼多的欄位？只顯示主要欄位，點選該列資料才顯示完整細節資訊<ref>What to do with too many columns in a table? - User Experience Stack Exchange https://ux.stackexchange.com/questions/95855/what-to-do-with-too-many-columns-in-a-table</ref>。</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* 如果是複雜的資料，則建議將資料切割成多個檢視 (view) 可以查看子集合的資料 <ref>UI Patterns for tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/28090/ui-patterns-for-tables-with-many-columns</ref>。</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* 如果是複雜的資料，則建議將資料切割成多個檢視 (view) 可以查看子集合的資料 <ref>UI Patterns for tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/28090/ui-patterns-for-tables-with-many-columns</ref>。</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* <del style="font-weight: bold; text-decoration: none;">行動版的設計細節，</del>(1) 顯示主要欄位，次要欄位可以勾選或隱藏、(2) 可以使用橫向捲軸、(3) 將表格轉換成 list 等等 <ref>How should large table columns be handled on a responsive design? - User Experience Stack Exchange https://ux.stackexchange.com/questions/15463/how-should-large-table-columns-be-handled-on-a-responsive-design</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* <ins style="font-weight: bold; text-decoration: none;">設計細節，</ins>(1) 顯示主要欄位，次要欄位可以勾選或隱藏、(2) 可以使用橫向捲軸、(3) 將表格轉換成 list 等等 <ref>How should large table columns be handled on a responsive design? - User Experience Stack Exchange https://ux.stackexchange.com/questions/15463/how-should-large-table-columns-be-handled-on-a-responsive-design</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></ref>。</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ref><ref>Tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/117550/tables-with-many-columns?newreg=fdf5edeeca6a4cfba3f056107cbbed17 "Don’t make it responsive, make it adaptive!"</ins></ref>。</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
</table>
Unknown user
https://wiki.planetoid.info/index.php?title=Table_with_many_columns&diff=23067&oldid=prev
Unknown user: Created page with "如何設計許多欄位的表格 == Design == * 使用者是否需要這麼多的欄位？只顯示主要欄位，點選該列資料才顯示完整細節資訊<ref>What to d..."
2022-06-29T16:12:24Z
<p>Created page with "如何設計許多欄位的表格 == Design == * 使用者是否需要這麼多的欄位？只顯示主要欄位，點選該列資料才顯示完整細節資訊<ref>What to d..."</p>
<p><b>New page</b></p><div>如何設計許多欄位的表格<br />
<br />
== Design ==<br />
* 使用者是否需要這麼多的欄位？只顯示主要欄位，點選該列資料才顯示完整細節資訊<ref>What to do with too many columns in a table? - User Experience Stack Exchange https://ux.stackexchange.com/questions/95855/what-to-do-with-too-many-columns-in-a-table</ref>。<br />
* 如果是複雜的資料，則建議將資料切割成多個檢視 (view) 可以查看子集合的資料 <ref>UI Patterns for tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/28090/ui-patterns-for-tables-with-many-columns</ref>。<br />
* 行動版的設計細節，(1) 顯示主要欄位，次要欄位可以勾選或隱藏、(2) 可以使用橫向捲軸、(3) 將表格轉換成 list 等等 <ref>How should large table columns be handled on a responsive design? - User Experience Stack Exchange https://ux.stackexchange.com/questions/15463/how-should-large-table-columns-be-handled-on-a-responsive-design<br />
</ref>。<br />
<br />
<br />
== References ==<br />
<references /><br />
<br />
[[Category:Design]]</div>
Unknown user