语义UI适合表以进行细分

时间:2019-05-31 04:52:13

标签: semantic-ui

我正在细分中创建表格,在大屏幕尺寸下看起来还可以,但是在小屏幕尺寸下,表格与细分重叠(请参见下面的代码段) 该如何解决?

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/>
<div class="ui grid"><div class="one column row"><div class="column"><div class="ui segment"><table class="ui selectable single line table"><thead class=""><tr class="left aligned"><th class="">Username</th><th class="">Nick Name</th><th class="">Full Name</th><th class="">Role</th><th class="">Activated</th></tr></thead><tbody class=""><tr class=""><td class=""><div class="ui transparent input"><input type="text"></div></td><td class=""><div class="ui transparent input"><input type="text"></div></td><td class=""><div class="ui transparent input"><input type="text"></div></td><td class=""><div class="ui inline dropdown" role="listbox" tabindex="0"><div aria-live="polite" class="text" role="alert">Staff</div><i aria-hidden="true" class="pencil icon"></i><div class="menu transition"><div class="item" role="option" style="pointer-events: all;"><span class="text">Registered Staff</span></div><div aria-checked="true" aria-selected="true" class="active selected item" role="option" style="pointer-events: all;"><span class="text">Staff</span></div><div class="item" role="option" style="pointer-events: all;"><span class="text">Top Admin</span></div></div></div></td><td class=""><div class="ui checked fitted toggle checkbox"><input class="hidden" readonly="" tabindex="0" type="checkbox" value=""><label></label></div></td></tr><tr class=""><td class=""><div class="ui transparent input"><input type="text"></div></td><td class=""><div class="ui transparent input"><input type="text"></div></td><td class=""><div class="ui transparent input"><input type="text"></div></td><td class=""><div class="ui inline dropdown" role="listbox" tabindex="0"><div aria-live="polite" class="text" role="alert">Staff</div><i aria-hidden="true" class="pencil icon"></i><div class="menu transition"><div class="item" role="option" style="pointer-events: all;"><span class="text">Registered Staff</span></div><div aria-checked="true" aria-selected="true" class="active selected item" role="option" style="pointer-events: all;"><span class="text">Staff</span></div><div class="item" role="option" style="pointer-events: all;"><span class="text">Top Admin</span></div></div></div></td><td class=""><div class="ui checked fitted toggle checkbox"><input class="hidden" readonly="" tabindex="0" type="checkbox" value=""><label></label></div></td></tr><tr class=""><td class=""><div class="ui transparent input"><input type="text"></div></td><td class=""><div class="ui transparent input"><input type="text"></div></td><td class=""><div class="ui transparent input"><input type="text"></div></td><td class=""><div class="ui inline dropdown" role="listbox" tabindex="0"><div aria-live="polite" class="text" role="alert">Staff</div><i aria-hidden="true" class="pencil icon"></i><div class="menu transition"><div class="item" role="option" style="pointer-events: all;"><span class="text">Registered Staff</span></div><div aria-checked="true" aria-selected="true" class="active selected item" role="option" style="pointer-events: all;"><span class="text">Staff</span></div><div class="item" role="option" style="pointer-events: all;"><span class="text">Top Admin</span></div></div></div></td><td class=""><div class="ui checked fitted toggle checkbox"><input class="hidden" readonly="" tabindex="0" type="checkbox" value=""><label></label></div></td></tr><tr class=""><td class=""><div class="ui transparent input"><input type="text"></div></td><td class=""><div class="ui transparent input"><input type="text"></div></td><td class=""><div class="ui transparent input"><input type="text"></div></td><td class=""><div class="ui inline dropdown" role="listbox" tabindex="0"><div aria-live="polite" class="text" role="alert">Staff</div><i aria-hidden="true" class="pencil icon"></i><div class="menu transition"><div class="item" role="option" style="pointer-events: all;"><span class="text">Registered Staff</span></div><div aria-checked="true" aria-selected="true" class="active selected item" role="option" style="pointer-events: all;"><span class="text">Staff</span></div><div class="item" role="option" style="pointer-events: all;"><span class="text">Top Admin</span></div></div></div></td><td class=""><div class="ui checked fitted toggle checkbox"><input class="hidden" readonly="" tabindex="0" type="checkbox" value=""><label></label></div></td></tr></tbody></table></div></div></div></div>

0 个答案:

没有答案