堆棧內存溢出
  簡體   English   中英

最小寬度表

[英]Min-Width Table

 原文  2012-04-04 14:55:23  0   4    html/ css/ asp.net/ html-table/ width

問題描述

我正在嘗試創建一個最小寬度為 500 像素的表格，其中包含一個最小寬度為 300 像素的文本區域的單元格。 表格的最小寬度似乎根本不起作用。 我正在使用 CSS 來設置表格和文本區域的樣式。 這是一個已知的問題？ 我已經在下面發布了代碼。

必須在 IE7 中正確顯示

ASPX 頁面

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <link rel="Stylesheet" href="./CSS/SpecialOps.css" />
        <link rel="Stylesheet" href="./CSS/myadditions.css" />
        <title>PFS Special OPS - My Additions</title>
    </head>
    <body>
        <!-- #include file="./SSI/header.aspx -->
        <div id="spacer">
            <div id="logospacer">

            </div>
            <div class="tabspacer">

            </div>
            <div class="tabspacer highlightspacer">

            </div>
            <div class="tabspacer">

            </div>
        </div>
        <div id="content">
            <div id="contentinner">
                <div class="divtitle">
                    Add News Excerpt
                </div>
                <div id="addnews">
                    <table id="addnewstbl">
                        <tr>
                            <td>
                                Title:
                            </td>
                            <td>
                                <input type="text" class="addnewsform"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Excerpt:
                            </td>
                            <td>
                                <textarea class="addnewsform"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Your Name:
                            </td>
                            <td>
                                Steven Norris
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </body>
    </html>

CSS

/*
* Stylesheet for my additions page of Special OPS
* Created by Steven T. Norris on 4/4/2012
* Last Update:          Update By:
*/
#addnews
{
    border-style:solid;
    border-width:1px;
    border-color:Black;
    padding:3px;
}
#addnews
{

}
#addnewstbl
{
    min-width:500px;
    border-style:solid;
    border-width:1px;
    border-color:Black;
}
.addnewsform
{
    min-width:300px;
}

4 個解決方案

解決方案1
 1  2012-04-04 15:03:51

這是我會做的。 將以下內容添加到

#addnewstbl
{
    width: 100%
    border-style:solid;
    border-width:1px;
    border-color:Black;
}

#addnews
{
    border-style:solid;
    border-width:1px;
    border-color:Black;
    padding:3px;
    float: left;
    min-width: 500px;
}

解決方案2
 0  2012-04-04 15:49:14

根據這個網站，最小寬度在 IE7 中是錯誤的。 我推薦一種不使用它的不同方法。

解決方案3
 0 已采納  2012-04-09 12:16:36

我找到了一種可以達到預期效果的解決方法。 不是特別相同的方法，但至少是相同的最終產品。 代碼中有一些您無需擔心的額外位，但基本上將您的容器設置為 100%，並將您的表單元素設置為 100 的某個小數百分比，並且應該實現效果。 在這種情況下，我使用了 98%，只是為了在右邊緣提供一點緩沖。 它並不理想，但它確實有效，而且使用這種方法的錯誤幾乎是不引人注意的。

ASPX 頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <link rel="Stylesheet" href="./CSS/SpecialOps.css" />
    <link rel="Stylesheet" href="./CSS/myadditions.css" />
    <title>PFS Special OPS - My Additions</title>
</head>
<body>
    <!-- #include file="./SSI/header.aspx -->
    <div id="spacer">
        <div id="logospacer">

        </div>
        <div class="tabspacer">

        </div>
        <div class="tabspacer highlightspacer">

        </div>
        <div class="tabspacer">

        </div>
    </div>
    <div id="content">
        <div id="contentinner">
            <div class="divtitle">
                Add News Excerpt
            </div>
            <div id="addnews">
                <table id="addnewstbl">
                    <tr>
                        <td class="addnewstitlecell">
                            Title:
                        </td>
                        <td>
                            <input type="text" class="addnewsform"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="addnewstitlecell">
                            Excerpt:
                        </td>
                        <td>
                            <textarea rows="10" class="addnewsform"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="addnestitlecell">
                            Catagory:
                        </td>
                        <td>
                            <select>
                                <option value="AVP/VP">AVP/VP</option>
                                <option value="Commercial">Commercial</option>
                                <option value="Compliance">Compliance</option>
                                <option value="Correspondence">Correspondence</option>
                                <option value="Customer Service">Customer Service</option>
                                <option value="ERAC">ERAC</option>
                                <option value="Government Payer">Government Payer</option>
                                <option value="PFS">PFS</option>
                                <option value="Regulatory">Regulatory</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="addnewstitlecell">
                            Submitted By:
                        </td>
                        <td>
                            Steven Norris
                        </td>
                    </tr>
                </table>
            </div>
            <div class="divtitle">
                Previously Added
            </div>
            <div id="prevadded">
                <div class="prevaddedtop">
                    <div class="prevaddedtitle">
                        News Excerpt Title
                    </div>
                    <div class="prevaddedcontent">
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    </div>
                    <div class="prevaddeduser">
                        -Steven Norris
                    </div>
                    <div class="prevaddedbuttons">
                        <input class="button" type="submit" value="Edit" />
                        <input class="button" type="submit" value="Delete" />
                    </div>
                </div>
                <div class="prevaddedtop">
                    <div class="prevaddedtitle">
                        News Excerpt Title
                    </div>
                    <div class="prevaddedcontent">
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.Blah blah blah blah blah blah blah.
                    </div>
                    <div class="prevaddeduser">
                        -Steven Norris
                    </div>
                    <div class="prevaddedbuttons">
                        <input class="button" type="submit" value="Edit" />
                        <input class="button" type="submit" value="Delete" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

/**
* Overall stylesheet for PFS Special OPS
* Created By Steven T. Norris on 4/3/2012
* Last Updated:         Last Updated By:
*/

/*
* Overall Navigation
* #navigation min-width mirrors .tab widths + #logoimg width + 200px allowance for #welcome width
* #navigation height mirrors #logoimg height
*/
#navigation
{
    min-width:677px;
    vertical-align:bottom;
    border-bottom-style:solid;
    border-bottom-width:2px;
    border-bottom-color:Black;
    height:100px;
}

/* 
* TopTabs
* .tab height and width mirrors image height and width for ./Images/blueTab.png
* .tabspacer width, margin-right, and padding mirrors .tab
* .tabspacer bottom mirrored in #content
* .tab top mirrors #logoimg height - .tab height - .tab padding-top - .tab padding-bottom
*/
.tab
{
    float:left;
    height:20px;
    width:100px;
    margin-right:5px;
    padding:2px;
    position:relative;
    top:76px;
    left:20px;
    font-size:large;
    background-image:url('../Images/blueTab.png');
    text-align:center;
}
.tablink
{
    color:Black;
    text-decoration:none;
}
.tablink:hover
{
    cursor:pointer;
    color:white;
}
.tabspacer
{
    height:2px;
    width:100px;
    float:left;
    margin-right:5px;
    padding:2px;
    left:20px;
    bottom:2px;
    position:relative;
    z-index:-1;
    background-color:#0383de;
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:black;
}

/*
* Logo
* #logospacer width mirrors #logoimg width
*/
#logo
{
    float:left;
}
#logoimg
{
    width:130px;
    height:100px;
}
#logospacer
{
    width:130px;
    height:1px;
    float:left;
    clear:left;
}

/*
* Content
* #content min-width mirrors #navigation
* #content background-color mirrors ./Images/blueTab.png bottom color
*/
#content
{
    height:100%;
    width:100%;
    background-color:#0386e1;
    position:relative;
    bottom:2px;
    min-width:677px;
}
#contentinner
{
    margin:10px;
    background-color:White;
    overflow:auto;
    border-style:solid;
    border-width:1px;
    border-color:Black;
    padding:5px;
}

/*
* Welcome
* #welcome height, padding, and top mirrors .tab
*/

#welcome
{
    float:right;
    height:20px;
    position:relative;
    padding:2px;
    top:76px;
    font-weight:bold;
}

/*
* Spacers
* #spacer min-width mirrors #navigation
* #highlightspacer background-color mirrors ./Images/blueTab.png bottom color
*/
#spacer
{
    min-width:677px;
}
.highlightspacer
{
    background-color:#0383de;
    border-bottom-color:#0383de;
    z-index:1;
}

    /*
    * Titles placed directly above a bordered div
    */
    .divtitle
    {
        position:relative;
        top:4px;
        font-weight:bold;
    }

    /*
    * Buttons
    */
    .button
    {
        background:url('../Images/blueButton.png');
        border-style:none;
        width:100px;
        height:20px;
    }
    .button:hover
    {
        cursor:pointer;
    }
/*
* Stylesheet for my additions page of Special OPS
* Created by Steven T. Norris on 4/4/2012
* Last Update:          Update By:
*/
#addnews
{
    border-style:solid;
    border-width:1px;
    border-color:Black;
    padding:3px;
}
#addnewstbl
{
    width:100%;
}
.addnewsform
{
    width:98%;
}
.addnewstitlecell
{
    width:100px;
    vertical-align:top;
}
#prevadded
{
    border-style:solid;
    border-width:1px;
    border-color:Black;
    padding:3px;
}
.prevaddeduser
{
    text-align:right;
}
.prevaddedbuttons
{
    text-align:right;
}
.prevaddedtitle
{
    font-weight:bold;
}
.prevaddedtop
{
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:Black;
    padding-bottom:3px;
}

解決方案4
 0  2012-08-23 20:51:08

這是 Inte.net Explorer 中的比較視圖問題。

如果你在 .net 上搜索，有幾種不同的方法可以解決這個問題，但簡而言之，你需要在 IE 中禁用此模式才能使 min-width 起作用。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 帶換行文字的表格單元格的最小寬度 固定寬度表中流體柱的最小寬度 表格欄：寬度，最小寬度，自動換行和“重要性”欄 最小寬度和最小寬度共存 使用寬度和最小寬度 在 HTML 表格中設置最小寬度<td> 使用最小寬度時折疊表格列 表格單元格會忽略最小寬度嗎？ 最小寬度不適用於表格布局：已修復 表格屬性的最小寬度和最大高度
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM