-1

我试图让我的表在位置页面上的位置表上，以在它低于 480 像素时适合其父元素。我的 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;
    }
}
4

3 回答 3

0

A<table>具有定义的最小宽度。在您的情况下，诸如 Administration、Northeast 和 Bartlesville 之类的词构成了一个特定的宽度。这些列宽不能减少更多。min-width你的整体<table>超过480px。

有一个选项可以打破它们。在小于 480 像素的屏幕中，您为每列分配一个宽度并使其适合 480 像素以下。然后打破宽度大于指定值的单词。例如。行政人员。这将显示为

Admin-
istrator

从而减小<table>.

于 2013-10-18T12:48:48.817 回答
0

当您处理表格和响应式设计时，可能值得考虑重排您的数据。

可以在以下位置看到一个示例：

http://api.jquerymobile.com/table-reflow/

于 2013-10-18T12:51:00.703 回答
0

嗨，管理“表格数据”和响应式设计真的很棘手，这里发生的事情是您的文字不能分成更多行，这就是表格利用的原因。一个解决方案不是很漂亮，但它是一个解决方案是通过媒体查询对属性进行更多更改，我包括这个

@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 强制单词在任何部分中断（不是一个很好的解决方案，但这是我看到的唯一一个）
于 2013-10-18T13:12:11.237 回答