表TD元素换行符中的Layer（div）

Question

我正在尝试在表TD元素中创建layer（div）框。 问题是文本自动换行。我认为是因为它在表格单元格中。

我希望图层框的宽度是可变的，但最大宽度是400px； 有什么办法解决这个问题？

这里是演示 http://jsfiddle.net/671474hx/160/

    <style>
   .box { position:relative;}
.layer { position:absolute; display:inline-block; top:30px; left:30px; border:1px solid #000;   max-width:400px; background:#eee  }

     </style>

<table class="list_member" border=1>
<tbody>
  <tr>
    <td>

      <div class="box">
      td
        <div class="layer">
        text text text text text text text text text text text 
        </div>
      </div>

    </td>
  </tr>

</tbody>

</table>

Answer 1

不要为您的.layer类提供最大宽度。将其更改为固定宽度，文本将包装在容器中。

.layer{
 width: 300px;
}