html并排表

时间：2012-03-04 23:28:15

标签： html css

我正在使用http://www.imaputz.com/cssStuff/bigFourVersion.html中的代码。我如何将另一张大表，一列，一行放到右边？

这是我按照以下建议完成的代码，但它将第二个表放在顶部的滚动表下面。如果第二个表可以在第一个滚动表的旁边，那么我就成功了。

 div.tableContainer {
clear: both;
border: 1px solid #963;
height: 800px;
overflow: auto;
float:left;
width: 11132px
    }

 div.tableTwo {
clear: both;
border: 1px solid #963;
height: 800px;
float:left;
overflow: auto;
width: 500px
    }

<body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width: 11132px class="scrollTable">
 <thead class="fixedHeader">
  <tr class="alternateRow">
    <th width="462" valign="top"><div align="center">
        <p>Features</p>
        <p>&nbsp;</p>
      </div>

 <div id="tableContainer" class="tableTwo">
 <p>sdvfds</p>
 <p>sfsf</p>
 <p>sf</p>
 <p>sdf</p>
 <p>sdf</p>
 <p>sdf</p>
 <p>&nbsp;</p>
 </div>

在下面添加建议后，新表显示在Dreamweaver中现有表的右侧，但浏览器仍显示在现有表的下方

 <div class="rightcol">
 <div id="tableTwo" class="tableTwo">
 <table border="0" cellpadding="0" cellspacing="0" width: 1000px">
 <tr width="462" align="left" valign="top">
 <div align="center">
 <p>point 1</p>
 <p>point 2</p>
 <p>point 3</p>
 <p>point 4</p>
 <p>point 5</p>
 <p>point 6</p>
 </div>

2 个答案:

答案 0 :(得分：4)

您听起来好像要使用2列布局

在你的CSS中

.leftcol {
    float:left;
    width:50%;
}
.rightcol {
    float:left;
    width:50%;
}
你的HTML中的

<div class="leftcol">
    ... table one in here
</div>

<div class="rightcol">
    ... table two in here
</div>

将css中的宽度编辑为您想要的大小。

您的文档看起来像

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .leftcol {
            float: left;
            width: 50%;
        }
        .rightcol {
            float: left;
            width: 50%;
        }        
    </style>
    <title>Columns</title>
</head>
<body>
    <div class="leftcol">
        put your left table in here
    </div>
    <div class="rightcol">
        put your right table in here
    </div>
</body>
</html>

以下是在页面上并排放置2个示例表的完整示例。如果遇到困难，可以尝试自定义。有关工作示例，请参阅http://jsfiddle.net/R3MBQ/，只需确保将结果窗格拉得足够宽以查看两个表。他们可能需要缩小以适应页面并排在页面上。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .leftcol {
            float: left;
            width: 50%;
        }
        .rightcol {
            float: left;
            width: 50%;
        }
        /* define height and width of scrollable area. Add 16px to width for scrollbar          */
        div.tableContainer {
            clear: both;
            border: 1px solid #963;
            height: 285px;
            overflow: auto;
            width: 756px
        }

        /* Reset overflow value to hidden for all non-IE browsers. */
        html>body div.tableContainer {
            overflow: hidden;
            width: 756px
        }

        /* define width of table. IE browsers only                 */
        div.tableContainer table {
            float: left;
            width: 740px
        }

        /* define width of table. Add 16px to width for scrollbar.           */
        /* All other non-IE browsers.                                        */
        html>body div.tableContainer table {
            width: 756px
        }

        /* set table header to a fixed position. WinIE 6.x only                                       */
        /* In WinIE 6.x, any element with a position property set to relative and is a child of       */
        /* an element that has an overflow property set, the relative value translates into fixed.    */
        /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
        thead.fixedHeader tr {
            position: relative
        }

        /* set THEAD element to have block level attributes. All other non-IE browsers            */
        /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
        html>body thead.fixedHeader tr {
            display: block
        }

        /* make the TH elements pretty */
        thead.fixedHeader th {
            background: #C96;
            border-left: 1px solid #EB8;
            border-right: 1px solid #B74;
            border-top: 1px solid #EB8;
            font-weight: normal;
            padding: 4px 3px;
            text-align: left
        }

        /* make the A elements pretty. makes for nice clickable headers                */
        thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
            color: #FFF;
            display: block;
            text-decoration: none;
            width: 100%
        }

        /* make the A elements pretty. makes for nice clickable headers                */
        /* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
        thead.fixedHeader a:hover {
            color: #FFF;
            display: block;
            text-decoration: underline;
            width: 100%
        }

        /* define the table content to be scrollable                                              */
        /* set TBODY element to have block level attributes. All other non-IE browsers            */
        /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
        /* induced side effect is that child TDs no longer accept width: auto                     */
        html>body tbody.scrollContent {
            display: block;
            height: 262px;
            overflow: auto;
            width: 100%
        }

        /* make TD elements pretty. Provide alternating classes for striping the table */
        /* http://www.alistapart.com/articles/zebratables/                             */
        tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
            background: #FFF;
            border-bottom: none;
            border-left: none;
            border-right: 1px solid #CCC;
            border-top: 1px solid #DDD;
            padding: 2px 3px 3px 4px
        }

        tbody.scrollContent tr.alternateRow td {
            background: #EEE;
            border-bottom: none;
            border-left: none;
            border-right: 1px solid #CCC;
            border-top: 1px solid #DDD;
            padding: 2px 3px 3px 4px
        }

        /* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
        /* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
        /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
        html>body thead.fixedHeader th {
            width: 200px
        }

        html>body thead.fixedHeader th + th {
            width: 240px
        }

        html>body thead.fixedHeader th + th + th {
            width: 316px
        }

        /* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
        /* All other non-IE browsers.                                            */
        /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
        html>body tbody.scrollContent td {
            width: 200px
        }

        html>body tbody.scrollContent td + td {
            width: 240px
        }

        html>body tbody.scrollContent td + td + td {
            width: 300px
        }
        -->        
    </style>
    <script type="text/javascript">
        <!--
        /* http://www.alistapart.com/articles/zebratables/ */
        function removeClassName (elem, className) {
            elem.className = elem.className.replace(className, "").trim();
        }

        function addCSSClass (elem, className) {
            removeClassName (elem, className);
            elem.className = (elem.className + " " + className).trim();
        }

        String.prototype.trim = function() {
            return this.replace( /^\s+|\s+$/, "" );
        }

        function stripedTable() {
            if (document.getElementById && document.getElementsByTagName) {  
                var allTables = document.getElementsByTagName('table');
                if (!allTables) { return; }

                for (var i = 0; i < allTables.length; i++) {
                    if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
                        var trs = allTables[i].getElementsByTagName("tr");
                        for (var j = 0; j < trs.length; j++) {
                            removeClassName(trs[j], 'alternateRow');
                            addCSSClass(trs[j], 'normalRow');
                        }
                        for (var k = 0; k < trs.length; k += 2) {
                            removeClassName(trs[k], 'normalRow');
                            addCSSClass(trs[k], 'alternateRow');
                        }
                    }
                }
            }
        }

        window.onload = function() { stripedTable(); }
        -->
    </script>

    <title>Columns</title>
</head>
<body>
    <div class="leftcol">
        <div id="tableContainer" class="tableContainer">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
        <thead class="fixedHeader">
            <tr>
                <th><a href="#">Header 1</a></th>
                <th><a href="#">Header 2</a></th>
                <th><a href="#">Header 3</a></th>
            </tr>
        </thead>
        <tbody class="scrollContent">
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>End of Cell Content 1</td>
                <td>End of Cell Content 2</td>
                <td>End of Cell Content 3</td>
            </tr>
        </tbody>
        </table>
        </div>
    </div>
    <div class="rightcol">
        <div id="tableContainer" class="tableContainer">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
        <thead class="fixedHeader">
            <tr>
                <th><a href="#">Header 1</a></th>
                <th><a href="#">Header 2</a></th>
                <th><a href="#">Header 3</a></th>
            </tr>
        </thead>
        <tbody class="scrollContent">
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>End of Cell Content 1</td>
                <td>End of Cell Content 2</td>
                <td>End of Cell Content 3</td>
            </tr>
        </tbody>
        </table>
        </div>
    </div>
</body>
</html>

答案 1 :(得分：0)

<html>
<head>
<title>tables sideXside</title>
       <style>

     table, td 
                {
                border-color: #000000; 
                          border-width: 1px; 
                          border-style: solid; 
                          border-collapse: collapse;
                          font-family: Arial; 
                          font-size: 14pt; 
                          font-weight: 500;
                          }

     td 
       {
         color: #000000; 
         text-align: center;
         padding: 10px 10px 10px 10px
         }

      .sidexside 
       {
             float: left;
             margin:20px;
             valign: top;
             }

       </style>

</head>
<body>

     <table summary="" width="10%" class="sidexside">

     <tr><td>1</td><td>2</td><td>3</td></tr>
     <tr><td>4</td><td>5</td><td>6</td></tr>
     <tr><td>7</td><td>8</td><td>9</td></tr>

     </table>

     <table summary="" width="10%" class="sidexside">



<tr><td>A</td><td>B</td><td>C</td></tr>
 <tr><td>D</td><td>E</td><td>F</td></tr>
 <tr><td>G</td><td>H</td><td>I</td></tr>

     </table>

     <table summary="" width="10%" class="sidexside">



<tr><td>i</td><td>ii</td><td>iii</td></tr>
 <tr><td>iv</td><td>v</td><td>vi</td></tr>
 <tr><td>vii</td><td>viii</td><td>ix</td></tr>

     </table>

</body>
</html>
相关问题
最新问题