2 
<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;
    }
4

1 に答える 1

3

指定された 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/

于 2013-10-05T02:34:57.207 に答える