html - 表格样式问题 - 列宽

Question

这里我提供了jssfile

现在的样子：

我想要达到的目标：

这是通过带有边框和负边距的 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 演示

<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>

但是使用 atable有点错误 - 你可以看看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 。