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
    {
        font-family:HelveticaNeue-Light;
        font-size:14px;
        padding:20px;
        background-color:#808080;
    }

Answer 1

您可以将表放在指示的DIV中。只有当你有一个非常冗长的单词时，你才会遇到问题：“abcdefghijklmnopqrstuvwxyzabcdefgh”。

你可以使用word-break来解决这个问题，你的表永远不会扩展父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/

在div中包装表

1 个答案: