表样式问题 - 列宽

Question

我在这里提供了jssfidle

现在看起来如何：

我想要实现的目标：

这是通过带有边框和负边距的table和div进行的，并且在不同的浏览器中实际上无法预测。

它应该是一个表格，顶部有三个小菜单列，下面是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 Demo

<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有点错误 - 您可以查看 jQueryTools - Tabs

Answer 2

使用colspan。正如您所使用的是三列，请使用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 here。