当前位置：文江博客话题详情

HTML 表格宽度。

发布于 2024-11-05 13:56:18 字数 301 浏览 0 评论 0原文

在我看来，我在这里严重丢失了一些东西，但我找不到手机下表的内容跨越整个表格。请参阅附加的以下 jsfiddle 链接：

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

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

请帮忙。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

逆光飞翔i 2024-11-12 13:56:18

在这种情况下是否需要嵌套表？如果您只有一个表并使用这可以解决问题吗？抱歉，如果情况并非如此，但您似乎过于复杂化了！

回复收藏 0 原文

冷清清 2024-11-12 13:56:18

您当前正在内联（在 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>

You are currently declaring the width of the table inline(in the html) and in the CSS and both values are different, you should wrap the tables in a div as follows, and remove the inline width declaration.

/* frames */

#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;
}

The Html should now look like this:

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

回复收藏 0 原文

~没有更多了~