html表格寬度不適用於手機

Question

我正在爲我的一位朋友的母親建立一個網頁，他正在啓動一項按摩練習，並且迄今爲止一切正常，但我遇到了麻煩。

我在一個表格中顯示價格，所以您可以在佈局中看到描述/持續時間/價格，但由於某些原因，這僅適用於臺式電腦/筆記本電腦，但在查看價格與移動設備，它擰了表的寬度設置。

這是我的代碼：

<table class="Titel1"> 
    <tr> 
     <td width="335">Gezichtsmassage</td> 
     <td width="80">20 Minuten</td> 
     <td width="55">€ 15,00</td> 
    </tr> 
    <tr> 
     <td width="335">Gezichts- en hoofdhuidmassage</td> 
     <td width="80">30 Minuten</td> 
     <td width="55">€ 20,00</td> 
    </tr> 
    <tr> 
     <td width="335">Hoofdhuidmassage</td> 
     <td width="80">20 Minuten</td> 
     <td width="55">€ 15,00</td> 
    </tr> 
    <tr> 
     <td width="335">Voetmassage</td> 
     <td width="80">20 Minuten</td> 
     <td width="55">€ 15,00</td> 
    </tr> 
    <tr> 
     <td width="335">Voetmassage incl. voetbad</td> 
     <td width="80">30 Minuten</td> 
     <td width="55">€ 22,50</td> 
    </tr> 
    <tr> 
     <td width="335">Ontspanningsmassage (BSR) gedeeltelijk</td> 
     <td width="80">30 Minuten</td> 
     <td width="55">€ 22,50</td> 
    </tr> 
    <tr> 
     <td width="335">Ontspanningsmassage (BSR) full body</td> 
     <td width="80">60 Minuten</td> 
     <td width="55">€ 35,00</td> 
    </tr> 
    <tr> 
     <td width="335">Ontspanningsmasssage (BSR) full body</td> 
     <td width="80">90 Minuten</td> 
     <td width="55">€ 50,00</td> 
    </tr> 
    <tr> 
     <td width="335">Zwangerschapsmassage</td> 
     <td width="80">60 Minuten</td> 
     <td width="55">€ 37,50</td> 
    </tr> 
    <tr> 
     <td width="335">Zwangerschapsmassage met partner*</td> 
     <td width="80">60 Minuten</td> 
     <td width="55">€ 42,50</td> 
    </tr> 
    <tr> 
     <td width="335">Hotstone</td> 
     <td width="80">30 Minuten</td> 
     <td width="55">€ 17,50</td> 
    </tr> 
    <tr> 
     <td width="335">Combinatie hotstone- en ontspanningsmassage</td> 
     <td width="80">90 Minuten</td> 
     <td width="55">€ 55,00</td> 
    </tr> 
    <tr> 
     <td width="335">Rug-, nek-, en schoudermassage</td> 
     <td width="80">30 Minuten</td> 
     <td width="55">€ 20,00</td> 
    </tr> 
    <tr> 
     <td width="335">Rug-, nek-, en schoudermassage</td> 
     <td width="80">60 Minuten</td> 
     <td width="55">€ 35,00</td> 
    </tr> 
</table> 

，這是什麼是我的風格腳本：

.Titel1 { 
    position:absolute; 
    top:110px; 
} 

如何解決這個原因我得到的想法任何想法？

Answer 1

您可能想從使用像素切換到％，以獲得適用於移動設備和網站的流暢顯示。

爲了改善這一點，我會刪除所有的寬度，並在CSS中完成這一切。

<table class="Titel1"> 
<tr> 
    <td>Gezichtsmassage</td> 
    <td>20 Minuten</td> 
    <td>€ 15,00</td> 
</tr> 
<tr> 
    <td>Gezichts- en hoofdhuidmassage</td> 
    <td>30 Minuten</td> 
    <td>€ 20,00</td> 
</tr> 
<tr> 
    <td>Hoofdhuidmassage</td> 
    <td>20 Minuten</td> 
    <td>€ 15,00</td> 
</tr> 
<tr> 
    <td>Voetmassage</td> 
    <td>20 Minuten</td> 
    <td>€ 15,00</td> 
</tr> 
<tr> 
    <td>Voetmassage incl. voetbad</td> 
    <td>30 Minuten</td> 
    <td>€ 22,50</td> 
</tr> 
<tr> 
    <td>Ontspanningsmassage (BSR) gedeeltelijk</td> 
    <td>30 Minuten</td> 
    <td>€ 22,50</td> 
</tr> 
<tr> 
    <td>Ontspanningsmassage (BSR) full body</td> 
    <td>60 Minuten</td> 
    <td>€ 35,00</td> 
</tr> 
<tr> 
    <td>Ontspanningsmasssage (BSR) full body</td> 
    <td>90 Minuten</td> 
    <td>€ 50,00</td> 
</tr> 
<tr> 
    <td>Zwangerschapsmassage</td> 
    <td>60 Minuten</td> 
    <td>€ 37,50</td> 
</tr> 
<tr> 
    <td>Zwangerschapsmassage met partner*</td> 
    <td>60 Minuten</td> 
    <td>€ 42,50</td> 
</tr> 
<tr> 
    <td>Hotstone</td> 
    <td>30 Minuten</td> 
    <td>€ 17,50</td> 
</tr> 
<tr> 
    <td>Combinatie hotstone- en ontspanningsmassage</td> 
    <td>90 Minuten</td> 
    <td>€ 55,00</td> 
</tr> 
<tr> 
    <td>Rug-, nek-, en schoudermassage</td> 
    <td>30 Minuten</td> 
    <td>€ 20,00</td> 
</tr> 
<tr> 
    <td>Rug-, nek-, en schoudermassage</td> 
    <td>60 Minuten</td> 
    <td>€ 35,00</td> 
</tr> 
</table> 

然後使用這個CSS：

.Titel1 { 
    position: relative; 
    width: 100%; 
} 

.Titel1 tr td:nth-child(1) { 
    width: 70%; 
} 

.Titel1 tr td:nth-child(2) { 
    width: 15%; 
} 

.Titel1 tr td:nth-child(3) { 
    width: 15%; 
} 

Answer 2

不要設置元素的寬度<td>元素裏面，但裏面的CSS：

<table class="Titel1"> 
<tr> 
    <td class="descriptions">Gezichtsmassage</td> 
    <td class="minutes">20 Minuten</td> 
    <td class="price">€ 15,00</td> 
</tr> 
<tr> 
    <td class="descriptions">Gezichts- en hoofdhuidmassage</td> 
    <td class="minutes">30 Minuten</td> 
    <td class="price">€ 20,00</td> 
</tr> 
<tr> 
    <td class="descriptions">Hoofdhuidmassage</td> 
    <td class="minutes">20 Minuten</td> 
    <td class="price">€ 15,00</td> 
</tr> 
<tr> 
    <td class="descriptions">Voetmassage</td> 
    <td class="minutes">20 Minuten</td> 
    <td class="price">€ 15,00</td> 
</tr> 
<tr> 
    <td class="descriptions">Voetmassage incl. voetbad</td> 
    <td class="minutes">30 Minuten</td> 
    <td class="price">€ 22,50</td> 
</tr> 
<tr> 
    <td class="descriptions">Ontspanningsmassage (BSR) gedeeltelijk</td> 
    <td class="minutes">30 Minuten</td> 
    <td class="price">€ 22,50</td> 
</tr> 
<tr> 
    <td class="descriptions">Ontspanningsmassage (BSR) full body</td> 
    <td class="minutes">60 Minuten</td> 
    <td class="price">€ 35,00</td> 
</tr> 
<tr> 
    <td class="descriptions">Ontspanningsmasssage (BSR) full body</td> 
    <td class="minutes">90 Minuten</td> 
    <td class="price">€ 50,00</td> 
</tr> 
<tr> 
    <td class="descriptions">Zwangerschapsmassage</td> 
    <td class="minutes">60 Minuten</td> 
    <td class="price">€ 37,50</td> 
</tr> 
<tr> 
    <td class="descriptions">Zwangerschapsmassage met partner*</td> 
    <td class="minutes">60 Minuten</td> 
    <td class="price">€ 42,50</td> 
</tr> 
<tr> 
    <td class="descriptions">Hotstone</td> 
    <td class="minutes">30 Minuten</td> 
    <td class="price">€ 17,50</td> 
</tr> 
<tr> 
    <td class="descriptions">Combinatie hotstone- en ontspanningsmassage</td> 
    <td class="minutes">90 Minuten</td> 
    <td class="price">€ 55,00</td> 
</tr> 
<tr> 
    <td class="descriptions">Rug-, nek-, en schoudermassage</td> 
    <td class="minutes">30 Minuten</td> 
    <td class="price">€ 20,00</td> 
</tr> 
<tr> 
    <td class="descriptions">Rug-, nek-, en schoudermassage</td> 
    <td class="minutes">60 Minuten</td> 
    <td class="price">€ 35,00</td> 
</tr> 

CSS：

.price { 
    width: 55px; 
} 

.minutes { 
    width: 80px; 
} 

.descriptions { 
    width: auto; 
    word-break: break-all; 
} 

參見：http://jsfiddle.net/epHsH/