css - 将表格包装在 div 中

Question

<div id="panelBelow">
     <div id="moveLeftDown">
          <p>table here</p>
     </div>
</div>

#panelBelow
    {
        width:100%;
        height:30px;
        background-color:#FFFFFF;
        margin-top:15px;
    }

是否可以在此处放置一个表格而不是此处的表格文本，但是有它以便表格换行到 div 的宽度。我应该补充一点，我的身体 css 上也有填充。

body
    {
        font-family:HelveticaNeue-Light;
        font-size:14px;
        padding:20px;
        background-color:#808080;
    }

Answer 1

您可以将表格放在指定的 DIV 内。只有当你有很长的词时，你才会遇到问题：“abcdefghijklmnopqrstuvwxyzabcdefgh”。

您可以使用分词来解决这个问题，并且您的表格永远不会扩展父 div。

<div id="panelBelow">
     <div id="moveLeftDown">
          <table>
              <tr>
                  <td>1</td>
                  <td>Hello world!</td>
                  <td>Goes a long sentence</td>
                  <td>andyoumightbeafraidofthis</td>
                  <td>actions</td>
              </tr>
         </table>
     </div>
</div>

body
    {
        font:normal 14px Arial;
        padding:20px;
        background-color:#808080;
    }

#panelBelow
    {
        width:300px;
        background:#FFFFFF;
        margin-top:15px;
    }

table {
    border-collapse:collapse;
    table-layout:fixed;
}

td{
    border:1px solid #ccc;
    padding:5px 10px;
    vertical-align:top;
    word-break:break-word;
}

工作：http: //jsfiddle.net/shekhardesigner/ej2RD/