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 的宽度。我应该补充一点，我的 body 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/