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/

html表格宽度不适用于移动设备

2 个答案: