带有固定边框单元格的表格

时间:2014-05-19 11:32:32

标签: html css html-table

意图

  1. 我想使用所有可用的水平和垂直空间绘制一个表格(所以说整个浏览器窗口减去边距和页眉等)。
  2. 调整浏览器窗口大小时,表格应动态调整大小。
  3. 它不应该比页面更宽或更长,而是如果内容大于单元格,则应该滚动内容。这些单元格在下图中用箭头标记。
  4. 方向上没有箭头的单元既不应改变其大小,也不应在该方向上滚动,而应固定。因此,表头只应变得更宽或更窄,左右条纹应仅改变其长度。
  5. Like this

    btw:我正在寻找纯CSS / HTML解决方案吗?

    天真尝试

    我认为这将是HTML 101:Example,但表格只会增长,直到显示整个内容,高度/宽度大小才会被忽略 的CSS:

    /* structure */
    table {
        width: 80%;
        margin-left: 10%;
        height: 80%;
    }
    .right, .left {
        width: 200px;
    }
    .thead > td, .tfoot > td {
        height: 200px;
    }
    .center, .tbody > td {
      overflow: auto;
    }
    
    /* content boxes */
    #content_lu, #content_ru, #content_lb, #content_rb {
        background-color: yellow;
        height: 200px;
        width: 200px;
    }
    #content_cu, #content_cb {
        background-color: blue;
        width: 800px;
        height: 200px;
    }
    #content_lm, #content_rm {
        background-color: green;
        width: 200px;
        height: 800px;
    }
    #content_cm {
        background-color: red;
        width: 800px;
        height: 800px;
    }
    

    和html:

    <table>
        <thead><tr>
            <td class="left"><div id="content_lu"></div></td>
            <td class="center"><div id="content_cu"></div></td>
            <td class="right"><div id="content_ru"></div></td>
        </tr></thead>
        <tbody><tr>
            <td class="left"><div id="content_lm"></div></td>
            <td class="center"><div id="content_cm"></div></td>
            <td class="right"><div id="content_rm"></div></td>
        </tr></tbody>
        <tfoot><tr>
            <td class="left"><div id="content_lb"></div></td>
            <td class="center"><div id="content_cb"></div></td>
            <td class="right"><div id="content_rb"></div></td>
        </tr></tfoot>
    </table>
    

    DIV-尝试

    我能够使用绝对定位的转角div和使用margin-left和-right的中心div来满足第一行的所有条件,将其框入父div。但是,我无法定位,例如最后居中的div因为绝对定位它不会被父div绑定。 Example

    的CSS:

    /* Structure */
    div.main {
       position: relative;
        width: 80%;
        margin-left: 10%;
        height: 80%;
    }
    
    /* corners */
    div.top.left {
        position: absolute;
        left: 0;        top: 0;
        width: 200px;   height: 200px;
    }
    div.top.right {
        position: absolute;
        right: 0;        top: 0;
        width: 200px;   height: 200px;
    }
    div.bottom.left {
        position: absolute;
        left: 0;        bottom: 0;
        width: 200px;   height: 200px;
    }
    div.bottom.right {
        position: absolute;
        right: 0;       bottom: 0;
        width: 200px;   height: 200px;
    }
    
    /* edges */
    div.top.center {
        margin-left: 200px;
        margin-right: 200px;
        height: 200px;
        overflow: auto;
    }
    div.bottom.center {
        margin-left: 200px;
        margin-right: 200px;
        height: 200px;
        overflow: auto;
    }
    div.middle.left {
        margin-top: 200px;
        margin-bottom: 200px;
        width: 200px;
        overflow: auto;
    }
    div.middle.right {
        margin-top: 200px;
        margin-bottom: 200px;
        width: 200px;
        overflow: auto;
    }
    
    /* center */
    div.middle.center {
        margin-top: 200px;
        margin-bottom: 200px;
        margin-left: 200px;
        margin-right: 200px;
        overflow: auto;
    }
    
    /* Content boxes */
    #content_lu, #content_ru, #content_lb, #content_rb {
        background-color: yellow;
        height: 200px;
        width: 200px;
    }
    #content_cu, #content_cb {
        background-color: blue;
        width: 800px;
        height: 200px;
    }
    #content_lm, #content_rm {
        background-color: green;
        width: 200px;
        height: 800px;
    }
    #content_cm {
        background-color: red;
        width: 800px;
        height: 800px;
    }
    

    HTML:

    <div class="main">
        <div class="top    left">  <div id="content_lu"></div></div>
        <div class="top    center"><div id="content_cu"></div></div>
        <div class="top    right"> <div id="content_ru"></div></div>
        <div class="middle left">  <div id="content_lm"></div></div>
        <div class="middle center"><div id="content_cm"></div></div>
        <div class="middle right"> <div id="content_rm"></div></div>
        <div class="bottom left">  <div id="content_lb"></div></div>
        <div class="bottom center"><div id="content_cb"></div></div>
        <div class="bottom right"> <div id="content_rb"></div></div>
    </div>
    

1 个答案:

答案 0 :(得分:1)

这是使用绝对定位实现布局的一种方法。

对于HTML:

<div class="wrapper">
    <div class="left">
        <div class="top">top</div>
        <div class="mid">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="bot">bot</div>
    </div>
    <div class="center">
        <div class="top">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="mid">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="bot"><p>Lorem ipsum dolor sit amet...</p></div>
    </div>
    <div class="right">
        <div class="top">top</div>
        <div class="mid">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="bot">bot</div>
    </div>
</div>

和CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
.wrapper {
    border: 1px dotted gray;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.left {
    position: absolute;
    left: 0;
    width: 200px;
    top: 0;
    bottom:0;
    background-color: yellow;
}
.center {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 0;
    bottom:0;
}
.right {
    position: absolute;
    right: 0;
    width: 200px;
    top: 0;
    bottom:0;
    background-color: yellow;
}
.top {
    position: absolute;
    background-color: cyan;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
}
.mid {
    position: absolute;
    top: 50px;
    bottom: 50px;
    width: 100%;
}
.bot {
    position: absolute;
    background-color: cyan;
    bottom: 0;
    left: 0;
    height: 50px;
    width: 100%;
}
p {
    margin: 0;
    height: 100%;
    overflow: auto
}

请参阅演示:http://jsfiddle.net/audetwebdesign/sfrXp/

注意:我将高度和某些位置偏移设置为50px而不是200px,因为 jsFiddle面板有点小,但这个概念仍然有用。

要处理溢出单元格的内容,请将overflow: autoheight: 100%设置为包含内容的块级元素,在此示例中为p

您可能还需要将height: 100%分配给bodyhtml标记,以定义根(屏幕)元素的垂直维度。