html - 表のスタイリングの問題 - 列の幅

Question

ここで私はjssfidleを提供しました

現在の外観:

私が達成したいこと:

これは、境界線と負のマージンを持つ table と div によって作成され、さまざまなブラウザーで実際に予測できない動作をします。

これは 1 つのテーブルで、上部に 3 つの小さなメニュー列があり、その下にテーブル幅 100% のコンテンツの列があります。しかし、フィドルでは別の方法で動作します。それを修正するのを手伝ってください。

CSS:

#main_box{
    width:60%;
    box-sizing:border-box;   

}
table#menu_table{
    position:relative;
     width:100%;
     border-collapse: collapse;

}
td.menu_item{

   width: 10%; 
    border:solid 1px green;
}
tr#content_row{
    width:100%;
}
td#content{
 border:solid 1px green;

Answer 1

colspan次のようにテーブルを使用して設定する必要があります。

JSFiddleデモ

<table border="1" width="500" cellpadding="0" cellspacing="">
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td colspan="5">Table Cell</td>
    </tr>
</table>

しかし、tableこれに a を使用するのは少し間違っています- jQueryTools - Tabsを見ることができます

Answer 2

を使用しcolspanます。あなたは3つの列を使用しているので、使用してくださいcolspan="3"

<td colspan="3">Table Cell</td>

コードを次のように置き換えるだけです: これを参照してください: http://jsfiddle.net/wf6GR/1/

    <td class="menu_item">publish</td>
    <td class="menu_item"> edit</td>
    <td class="menu_item"> delete </td>
        </tr>
        <tr id='content_row'>
   <td id="content" colspan="3">
       The aid issue in in the 1960s 
After the Second World War, Sweden’s first sense of affiliation was with the other Nordic 
countries. Its foreign policy was characterized  a will to decrease super power tensions by urging for patience and caution. Foreign Minister Östen Undén emphasised 
the importance of strengthening international law and thereby backing up the rights of 
small states. At the same time, Sweden was not believed to play a significant role in 
world politics and should not take side in any important security .  


            </td>
        </tr>

     </table>


  </div>

Answer 3

<td>メニュー項目に別のタグを追加してから、 に適用colspan="4"します#content。

追加されたタグにクラスを追加して、<td>スタイルを設定できるようにすることができますborder: 0;

ここでJSFiddle の例を表示します。