html - レスポンシブデザインの不具合

Question

ロケーションページのロケーションテーブルで、テーブルが 480px 未満の場合に親要素内に収まるようにしようとしています。CSS のメディアクエリは 250px から 780px をチェックしますが、何らかの理由で 480 を下回ると、画面外になり、親要素の外に出始めます。どんな助けでも大歓迎です。

サイト: http://www.okatod.org

ここにHTMLがあります

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>OKATOD</title>
        <meta charset="utf-8" />

        <!-- My Work Machine -->
        <!-- <link rel="stylesheet" href="C:\Users\fitzst\Desktop\OKATOD\CSS2\locationsTheme.css" type="text/css" /> -->

        <!-- My Personal Pc -->
        <!-- <link rel="stylesheet" href="G:\OKATOD\Better OKATOD Website\CSS2\locationsTheme.css" type="text/css" /> -->

        <!-- Server -->
        <link rel="stylesheet" href="CSS2/locationsTheme.css" type="text/css" />
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
        <meta name="viewport" content="width=device-width; maximum-scale=1; minimum-scale=1;" />

    </head>


    <body class="body">

        <header class="mainHeader">
            <img src="img/logo.gif">
            <nav><ul>
                <li><a href="http://www.okatod.org/index.html">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li class="active"><a href="http://www.okatod.org/Locations.html">Locations</a></li>
                <li><a href="#">Contact</a></li>
            </ul></nav>
        </header>

        <div class="mainContent">
            <div class="content">   
                    <article class="topcontent">    
                        <header>
                            <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">OKATOD Locations</a></h2>
                        </header>

                        <table class="locationsTable">
                            <tr class="tableHeadings">
                                <th>Name</th>
                                <th>Street Address</th>
                                <th>City</th>
                                <th>State</th>
                                <th>Zip Code</th>
                                <th>Phone Number</th>
                            </tr>
                            <tr>
                                <td>Behavorial Health Group</td>
                                <td>5401 SW 29th</td>
                                <td>Oklahoma</td>
                                <td>OK</td>
                                <td>73128</td>
                                <td>(405)-681-2003</td>
                            </tr>
                            <tr>
                                <td>Southern Oklahoma Treatment Services</td>
                                <td>905 Holiday Dr.</td>
                                <td>Ardmore</td>
                                <td>OK</td>
                                <td>73401</td>
                                <td>(580)-745-9083</td>
                            </tr>
                            <tr>
                                <td>Southern Oklahoma Treatment Services</td>
                                <td>5912 US Hwy 70</td>
                                <td>Mead</td>
                                <td>Ok</td>
                                <td>73449</td>
                                <td>(580)-942-7650</td>
                            </tr>
                            <tr>
                                <td>Rightway Medical</td>
                                <td>9017 South I-35 Service Road</td>
                                <td>Oklahoma City</td>
                                <td>Ok</td>
                                <td>73160</td>
                                <td>(405)-616-3366</td>
                            </tr>
                            <tr>
                                <td>Quapaw Counseling Servies</td>
                                <td>58150 East 66 Road</td>
                                <td>Miami</td>
                                <td>Ok</td>
                                <td>74354</td>
                                <td>(918)-542-1786</td>
                            </tr>
                            <tr>
                                <td>Rightway Medical of Bartlesville</td>
                                <td>610 W. Hensley Blvd</td>
                                <td>Bartlesville</td>
                                <td>Ok</td>
                                <td>74003</td>
                                <td>(918)-337-6007</td>
                            </tr>
                            <tr>
                                <td>Rightway Medical of Roland</td>
                                <td>117 E. Ray Fine Blvd</td>
                                <td>Bartlesville</td>
                                <td>Ok</td>
                                <td>74954</td>
                                <td>(918)-427-3344</td>
                            </tr>
                            <tr>
                                <td>Tulsa Rightway Medical</td>
                                <td>3445 S Sheridan Road E</td>
                                <td>Tulsa</td>
                                <td>Ok</td>
                                <td>74145</td>
                                <td>(918)-610-3366</td>
                            </tr>
                            <tr>
                                <td>Oklahoma City Veterans Administration Medical</td>
                                <td>921 Northeast 13th St.</td>
                                <td>Oklahoma City</td>
                                <td>Ok</td>
                                <td>73104</td>
                                <td>(405)-456-2858</td>
                            </tr>
                            <tr>
                                <td>Mission Treatment Centers, Inc.</td>
                                <td>5550 South Garnett</td>
                                <td>Tulsa</td>
                                <td>Ok</td>
                                <td>74146</td>
                                <td>(918)-665-2501</td>
                            </tr>
                            <tr>
                                <td>Keetoowah Cherokee Treatment Services</td>
                                <td>2727 East Admiral Place</td>
                                <td>Tulsa</td>
                                <td>Ok</td>
                                <td>74110</td>
                                <td>(918)-835-3017</td>
                            </tr>
                            <tr>
                                <td>Advanced Recovery Services</td>
                                <td>301 SE 59th St</td>
                                <td>Oklahoma City</td>
                                <td>Ok</td>
                                <td>73129</td>
                                <td>(405)-672-3033)</td>
                            </tr>
                        </table>




                    </article>
            </div>
        </div>

        <footer class="mainFooter">
            <p>Copyright &copy; 2013 <a href="http://OKATOD.org">OKATOD</a></p>
        </footer>

    </body>
</html>

CSSは次のとおりです。

/*
    Theme Name: index Theme HTML5/CSS3 Layout
    Description: Basic HTML5/CSS3 layout built on a responsive framework
    Version: 1.0
    Author URL: Trevor Fitzsimmons
*/

/* ===========================
   ======= Body style ======== 
   =========================== */

body {
        background-image: url('http://www.okatod.org/Images/bg.png'); 
    color: #000305; 
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left; 
    }

.body {
        clear: both; 
    margin: 0 auto; 
    width: 70%;
}

/* ===========================
   ========= Headings ======== 
   =========================== */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em}     /* 14px */

h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: .8em;
}

/* ===========================
   ======= Anchor style ====== 
   =========================== */
a {
    outline: 0;
    }

a img {
    border: 0px; 
    text-decoration: none;
}

a:link, a:visited {
    color: #CF5C3F;
    padding: 0 1px;
    text-decoration: none;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
    text-decoration: none;
}

/* ===========================
   ===== Main Navigation ===== 
   =========================== */

.mainHeader nav {
    background: #666;
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    margin: 0 auto 30px auto;
    text-align: center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none; 
    margin: 0 auto;
}

.mainHeader nav ul li {
    float: left; 
    display: inline; 
}

.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 5px 23px;
    text-decoration: none;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background: #CF5C3F;
    color: #fff;
    text-shadow: none !important;
}

.mainHeader nav li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader img {
    width: 10%;
    height: auto;%;
    margin: 3% 0; 
}

/* ===========================
   ======= Content Area ====== 
   =========================== */

.mainContent {
    overflow: hidden;
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;         
}

.topcontent {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    padding: 3% 5%;         
    text-align: center;
}

.topcontent header {
    margin-top: -20px; 
}

.locationsTable{
    border-collapse: collapse;
}

.tableHeadings {
    margin-right: 5px; 
}

.locationsTable th {
    margin-right: 5px; 
}

.locationsTable td {
    margin-bottom: 5px; 
    border: 2px solid #444;
}

.bottomcontent {
    background-color: #FFF; 
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    padding: 3% 5%;
}

.content {
    width: 100%;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
}

.post-info {
    font-style: italic;
    color: #999;
    font-size: 85%;
}

/* ===========================
   ======== Sidebar ========== 
   =========================== */

.top-sidebar {
    width: 24%;
    float: left;
    margin-left: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    background-color: #FFF; 
    padding: 2% 3%;
    margin-bottom: 2%;
}

.middle-sidebar {
    width: 24%;
    float: left;
    margin-left: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    background-color: #FFF; 
    padding: 2% 3%;
    margin-bottom: 2%;
}

.bottom-sidebar {
    width: 24%;
    float: left;
    margin-left: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    background-color: #FFF; 
    padding: 2% 3%;
}

/* ===========================
   ========= Footer ========== 
   =========================== */

.mainFooter {
    width: 100%;
    float: left;
    margin-top: 2%;
    margin-bottom: 2%;
    padding-left: 0;
    background-color: #666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    color: #FFF;    
}

.mainFooter p {
    width: 91%;
    margin: 2% auto;
}

/* ===========================
   ====== Media Queries ====== 
   =========================== */

@media only screen and (min-width : 150px) and (max-width : 780px)
{
    .body {
        clear: both; 
        margin: 0 auto; 
        width: 90%;
        font-size: 90%;
    }

    .mainHeader nav {
        background: #666;
        font-size: 1.143em;
        height: 160px;
        line-height: 30px;
        margin-bottom: 0;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .mainHeader nav ul {
        list-style: none; 
        margin: 0 auto;
        padding-left: 0;
    }

    .mainHeader nav li {
        margin-left: 0 auto;
        width: 100%;
    }

    .mainHeader nav a:link, .mainHeader nav a:visited {
        color: #FFF;
        display: block;
        height: 30px;
        padding: 5px 0;
        text-decoration: none;
    }

    .mainHeader nav a:active,
    .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
        background: #CF5C3F;
        color: #fff;
        text-shadow: none !important;
    }

    .mainHeader nav li a {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;

        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .mainHeader img {
        width: 100%;
        height: auto;
        margin-bottom: 3%;
    }

    .mainContent {
        overflow: hidden;
        line-height: 25px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        margin-top: 4%;
        margin-bottom: 2%;
    }

    .topcontent {
        background-color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        padding: 2% 5%;
        margin-bottom: 4%;
    }

    .bottomcontent {
        background-color: #FFF; 
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        padding: 2% 5%;
    }

    .content {
        width: 100%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
    }   

    .post-info {
        display: none;
    }

    .top-sidebar {
        width: 86%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        background-color: #FFF; 
        margin-top: 4%;
        margin-left: 0;
        padding: 0 7%;
        margin-bottom: 0;       
    }

    .top-sidebar p {
        width: 90%;
    }

    .middle-sidebar {
        width: 86%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        background-color: #FFF; 
        margin-top: 4%;
        margin-left: 0;
        padding: 0 7%;
        margin-bottom: 0;   
    }

    .middle-sidebar p {
        width: 90%;
    }

    .bottom-sidebar {
        width: 86%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        background-color: #FFF; 
        margin-top: 4%;
        margin-left: 0%;
        padding: 0 7%;
        margin-bottom: 1%;
    }

    .bottom-sidebar p {
        width: 90%;
    }

    .mainFooter {
        width: 100%;
        float: left;
        margin: 2% 0;
        padding-left: 0;
        background-color: #666;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        color: #FFF;    
    }

    .mainFooter p {
        width: 86%;
        margin: 2% auto;
    }
}

score 0 · Accepted Answer

A<table>には最小幅が定義されています。あなたの場合、Administration、Northeast、Bartlesville などの単語が特定の幅を構成します。これらの列幅はそれ以上減らすことはできません。min-widthあなたの全体は<table>480px以上です。

それらを分割するオプションがあります。480px 未満の画面では、各列に幅を割り当て、480px 未満に収まるようにします。次に、割り当てられた値よりも幅が広い単語を分割します。たとえば。管理者。これは次のように表示されます

Admin-
istrator

したがって、の全体の幅を減らし<table>ます。

score 0 · Accepted Answer

こんにちは、「テーブルデータ」とレスポンシブデザインを管理するのは本当に難しいです。ここで起こることは、あなたの言葉がそれ以上の行に分割できないということです。それがテーブルエクスプロイトの理由です。解決策は美しくありませんが、解決策は、メディアクエリを使用してプロパティをさらに変更することです。これを含めます

@media only screen and (min-width : 150px) and (max-width : 480px)
    {
        .locationsTable tr td{
            word-break:break-all;
            line-height:20px;
            font-size:70%;
    }

ここでこれを試すことができますhttp://jsfiddle.net/C2wP6/

私はいくつかのものを含めます：

フォントサイズを小さくすることができます。
行の高さを減らしてスペースを増やすこともできます。
Word-break は、任意の部分で単語を強制的に分割します (本当に良い解決策ではありませんが、私が見る唯一のものです)

html - レスポンシブデザインの不具合

3 に答える 3

Related

Reference