See it on Jsfiddle

Question

目前我正在学习HTML / CSS，我想以windows 8风格（metro风格）创建博客。但我在禁用溢出时遇到问题。我在html的<body>中使用了一个表，每个表数据的大小都是固定的。但每当我在表中的一行中添加一个单元格时，如果该行在x方向上溢出，那么该单元格会自动跳转。

无论如何都要避免这种情况吗？

这是我的代码的一部分：

CSS：

/***Creating the dashboard in metro style***/
.dashboard {
    position: fixed;
    top: 10.5em;
    left: 0;
    padding-top: 1em;
    padding-left: 1em;
    padding-bottom: 1em;
    border: 5px solid white;
    overflow-x: scroll;
    overflow-y:hidden;
}

td {
    border: 3px solid yellow;
    float: left;
    margin: 0;
    color: black;
    width: 300px;
    font-size: 1.5em;
    cursor: pointer;
    position: relative;
    background-color: white;
}

.tile-1{
    background-color: #56d9c9;
    color: white;
}

HTML：

<div class="dashboard">
            <table style="border: 1px solid red">
                <tr>
                    <td><p>I just got you babe 1</p></td>
                    <td><p>I just got you babe 2</p></td>
                    <td><p>I just got you babe 3</p></td>
                    <td><p>I just got you babe 4</p></td>
                    <td><p>I just got you babe 5</p></td>
                    <td><p>I just got you babe 6</p></td>
                </tr>

                <tr>
                    <td><p>I just got you babe 7</p></td>
                    <td><p>I just got you babe 8</p></td>
                    <td><p>I just got you babe 9</p></td>
                    <td><p>I just got you babe 10</p></td>
                    <td><p>I just got you babe 11</p></td>
                    <td><p>I just got you babe 12</p></td>
                </tr>

                <tr>
                    <td><p>I just got you babe 13</p></td>
                    <td><p>I just got you babe 14</p></td>
                    <td><p>I just got you babe 15</p></td>
                    <td><p>I just got you babe 16</p></td>
                    <td><p>I just got you babe 17</p></td>
                    <td><p>I just got you babe 18</p></td>
                    <td><p>I just got you babe 19</p></td>
                    <td><p>I just got you babe 20</p></td>
                </tr>
            </table>
        </div>

Answer 1

你所追求的是表格式布局，而不是真正的表格。表格用于表格数据，而不是布局。

话说回来，你可以在不破坏心理布局的情况下轻松添加更多块而不会破坏水平滚动。这是一个例子：

演示：http://jsfiddle.net/abhitalks/HSE4e/2/

HTML ：

与您的布局保持相似，唯一的区别是不是表格，行和单元格，而是div s。

<div class="wrap">                      <!-- wrapper to contain the layout -->
    <div class="table">                 <!-- this holds your blocks and scrolls -->
        <div class="row">               <!-- this allows you multiple rows -->
            <div class="content"></div> <!-- actual content -->
            <div class="content"></div>
        </div>
        <div class="row">
            <div class="content"></div> <!-- by having rows, -->
            <div class="content"></div> <!-- you can have differing number of.. -->
            <div class="content"></div> <!-- ..content blocks in each row -->
        </div>
        ...
    </div>
</div>

CSS ：

* {
    margin: 0; padding: 0; box-sizing: border-box; /* reset */
}
html, body {
    overflow: hidden; 
    width: 100%; /* restrict the page width to viewport */
}
.wrap {
    width: 100%; height: 200px; /* restrict width to viewport */
    overflow-y: hidden; /* hide vertical scrollbar */
    overflow-x: scroll; /* show only horizontal scrollbar */
}
.table {
    width: 1000px; /* arbitrarily high width to allow scroll */
    height: 100%; /* restrict height to the container */
}
.row {
    margin: 8px 8px; /* visually separate rows */
}
.content {
    display: inline-block; /* make content blocks flow inline */
    width: 100px; height: 50px; /* any height/width you want */
    margin: 0px 8px; /* visually separate content blocks */
}

因此，使用与您相同的心理模型，只需要考虑CSS而不是表格。

通过这种安排，您可以在每行中拥有不同数量的内容块。您可以在可用高度中放置尽可能多的行。

使用Javascript也可以处理鼠标滚轮，水平滚动。

Answer 2

您需要重新思考问题的整个方法，如上所述，表的使用在语义上和概念上都是不正确的。幸运的是，有很多关于创建水平滚动网站的信息，例如查看http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/。

Answer 3

您必须为width设置height和table！

我改变了你的代码！

See it on Jsfiddle

<强> CSS：

.dashboard {
    position: fixed;
    top: 10.5em;
    left: 0;
    max-height:180px;
    width:500px;
    padding-top: 1em;
    padding-left: 1em;
    padding-bottom: 1em;
    border: 5px solid white;
    overflow-x:scroll;
}
table{
    height:200px;
    width:10000px;
}
td {
    border: 3px solid yellow;
    margin: 0;
    color: black;
    width: 300px;
    font-size: 1.5em;
    cursor: pointer;
    margin:2px;
    display:inline-block;
    background-color: white;
}
.tile-1{
    background-color: #56d9c9;
    color: white;
}

禁用HTML / CSS中的垂直溢出

3 个答案:

See it on Jsfiddle