First, thanks very much for the help. I have tried a several way mentioned above. It just doesnt work well. I appreciated of your suggestion about replacing the table by all the div. However, it is necessary to have a table for this case, Hero/Info1(editable) or Example Layout. The table is for the information and the stats of a game.
On the other hand, I found there is a class for mobile which is pretty cool, portable-infobox. It collapses the table when too many rows.
<div style="border:4px solid black;padding:5px">
<div style="width:100%"><center>'''Title'''</center></div>
<div style="float:left;margin-right:5px;">[[File:San_Francisco.jpg|100px]]</div>
{| class="article-table" style="text-align:center; margin:0;"
|-
! colspan=2| <center>'''Subtitle'''</center>
|-
| '''Lv'''
| 100
|-
| '''Content'''
| sagdfgb kfdjvbl kojkerav
|-
|}
<div style="clear:both;"></div>
</div>
Title
Sub-title
|
---|
Lv
| 100
|
Content
| sagdfgb kfdjvbl kojkerav
|
As you could see when the content is not full enough, the table doesnt look good at all. How could we fix the width of the table as wide as possible to fully fit the frame?
mobile stylesheet??? Is it available for us to edit it? I thought it is hidden somewhere and not allowed. How could I do it?