HTML 表格宽度。答案

【问题标题】：HTML Table width .HTML 表格宽度。
【发布时间】：2011-08-20 00:19:54
【问题描述】：

在我看来，我在这里严重遗漏了一些东西，但我无法获得牢房下表的跨度与整个表。请参阅以下 jsfiddle 链接：

http://jsfiddle.net/jeremysolarz/5stQc/2/

我知道表格设计并不好，但我在这里使用的是一个遗留应用程序，其中包含很多 gif 间隔图像，我想删除它并切换到更以 CSS 为中心的布局。

请帮忙。

【问题讨论】：

标签： html css html-table width

【解决方案1】：

在这种情况下是否需要嵌套表？如果您只有一张桌子并使用<th colspan="3">，这会解决问题吗？抱歉，如果不是这种情况，但您似乎过于复杂了！

【讨论】：

+1 在这种情况下不需要嵌套表——可以简化。
你可以在提供的 js fiddle 链接上尝试一下，即使没有内表它也不起作用
试试这个：jsfiddle.net/5stQc/20 - 我认为问题在于 CSS 中表格的固定宽度在最后造成了间隙。 EDIT - 删除 CSS 中的 display:block 就可以了；以及其他一些不必要的位：jsfiddle.net/5stQc/28

【解决方案2】：

您当前正在内联（在 html 中）和 CSS 中声明表格的宽度，并且两个值不同，您应该将表格包装在 div 中，如下所示，并删除内联宽度声明。

/* 帧 */

#foo{ 
    width:100%;
    display: inline-block;
}
.newframeContainer {
    padding:0;
    margin:0 auto;
    text-align: left;
    width:70%;
    height: auto;
    border:none;
    -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        border: 1px solid #B6B6B6;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

Html 现在应该如下所示：

<div id="foo">
<table height="100%" class="newframeContainer" cellspacing="1">
    <tbody>
        <tr height="27">
            <th colspan="3">
                ADAM Statistics
            </th>            
        </tr>
        <tr height="99%">
            <td class="text-bold">Total Project Budgets [USD] </td>
            <td>test</td>
            <td valign="top" align="right">
                192,609,012
            </td>
        </tr>
    <tbody>
</table>

</div>

【讨论】：