Question

此网站上的一个页面存在移动设备宽度的问题，我找不到原因。我测试了不显示 4 列的表格，这是该页面唯一的唯一元素（其他页面工作正常）。我检查了 html body 上的宽度属性，似乎没有任何问题。关于可能导致这种情况的任何其他想法？

我使用这样的表格：

<table class="table1">
<thead>
<tr class="tableizer-firstrow">
<th>Spanish</th>
<th>In context</th>
<th>Translation</th>
</tr>
</thead>
<tbody>
<tr>
<td>color</td>
<td>Cambié el <strong>color</strong> de las paredes.</td>
<td>I changed the <strong>color</strong> of the walls.</td>
</tr>
<tr>
<td>profesor</td>
<td>Alejandro es mi <strong>profesor</strong> favorito.</td>
<td>Alejandro is my favorite <strong>professor</strong> / teacher.</td>
</tr>
<tr>
<td>autor</td>
<td>Stephen King es un <strong>autor</strong> muy famoso.</td>
<td>Stephen King is a very famous <strong>author</strong>.</td>
</tr>
<tr>
<td>favor</td>
<td>Quiero pedirte un <strong>favor</strong>.</td>
<td>I want to ask you a <strong>favor</strong>.</td>
</tr>
<tr>
<td>director</td>
<td>El <strong>director</strong> de la empresa se va de vacaciones.</td>
<td>The <strong>director</strong> of the company is going on vacation.</td>
</tr>
<tr>
<td>doctor</td>
<td>Necesito un <strong>doctor</strong>, es urgente.</td>
<td>I need a <strong>doctor</strong>, it's urgent.</td>
</tr>
<tr>
<td>superior</td>
<td>Nuestra carne es <strong>superior</strong> a las demás.</td>
<td>Our meat is <strong>superior</strong> to the rest.</td>
</tr>
<tr>
<td>interior</td>
<td>Las paredes <strong>interiores</strong> están decoradas con mosaicos.</td>
<td>The <strong>interior</strong> walls are decorated with mosaics.</td>
</tr>
<tr>
<td>error</td>
<td>Creo que has cometido un <strong>error</strong>.</td>
<td>I think you made an <strong>error</strong>.</td>
</tr>
<tr>
<td>exterior</td>
<td>No hay que cortar la capa <strong>exterior</strong> de la tela.</td>
<td>The <strong>exterior</strong> / outer layer of the fabric must not be cut.</td>
</tr>
<tr>
<td>factor</td>
<td>El dinero no es el único <strong>factor</strong>.</td>
<td>Money is not the only <strong>factor</strong>.</td>
</tr>
<tr>
<td>actor</td>
<td>Guillermo se hizo <strong>actor</strong> a los cinco años.</td>
<td>Guillermo became an <strong>actor</strong> at five.</td>
</tr>
<tr>
<td>investigador</td>
<td>El <strong>investigador</strong> no tiene pruebas.</td>
<td>The <strong>investigator</strong> doesn't have evidence.</td>
</tr>
<tr>
<td>motor</td>
<td>El taxista dejó el <strong>motor</strong> encendido mientras esperaba.</td>
<td>The taxi driver left the <strong>motor</strong> running while he waited.</td>
</tr>
<tr>
<td>inferior</td>
<td>No debes sentirte <strong>inferior</strong>.</td>
<td>You shouldn't feel <strong>inferior</strong>.</td>
</tr>
</tbody>
</table>
</div>

使用以下 CSS：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 80%;
}

.table1 th {
  background: #111;
  color: white;
}

td {
  position: relative;
}

td, th {
  padding: 9px;
}

tr:nth-child(2n) {background: #ececec;}

感谢您的帮助。

Answer 1

CSS

td { word-break: break-word; }

是什么导致此页面溢出？

1 个答案: