显示表格右侧的内容

时间:2014-06-09 04:32:44

标签: html css

我正在尝试开发一个网页,其中有一个表格在div的左侧运行,然后在右侧显示内容。我有桌面设置,但对于我的生活,我无法弄清楚如何在右边显示其他内容(并没有显示在表格下方)。

到目前为止,我的代码是:http://jsfiddle.net/fZJnp/

我希望有一个可用的区域占用内容中的剩余宽度' DIV。

这是分别应用于内容div和表的css:

#content {
    margin: 0 auto; 
    width:50%;
    height:auto;
    border:solid 1px #003366;
    background-color:#FFF;
    padding:10px;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75), 0px -1px 2px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75), 0px -1px 2px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75), 0px -1px 2px 0px rgba(0,0,0,0.75);
}

table {
  border-collapse: collapse;
  background:#EEE;
  color:#111;
} 

Float:left,当应用于表格时,似乎让我在右边显示信息和其他元素,但它会弄乱页面上的其他元素。

请让我知道你的想法,希望我能正确解释我的问题。

提前致谢!

2 个答案:

答案 0 :(得分:1)

我会使用两个div,左边和右边。这是我用来使其工作的HTML和CSS。您可能想要查看CSS框架" Bootstrap,"由Twitter发布。使用预先编写的样式表可以很容易地实现这样的布局。

HTML:

<body>
      <div id="left">
        <table>
          <thead>
            <tr>
              <th>Type</th>
              <th>Destination</th>
            </tr>
          </thead>
          <tbody>

            <tr>
              <td>A239</td>
              <td class="Lowsec">Lowsec</td>
            </tr>

            <tr>
              <td>A641</td>
              <td class="Highsec">Highsec</td>
            </tr>

            <tr>
              <td>A982</td>
              <td class="C6">C6</td>
            </tr>

            <tr>
              <td>B041</td>
              <td class="C6">C6</td>
            </tr>

            <tr>
              <td>B274</td>
              <td class="Highsec">Highsec</td>
            </tr>

            <tr>
              <td>B449</td>
              <td class="Highsec">Highsec</td>
            </tr>

            <tr>
              <td>C125</td>
              <td class="C2">C2</td>
            </tr>

            <tr>
              <td>C140</td>
              <td class="Lowsec">Lowsec</td>
            </tr>

            <tr>
              <td>C247</td>
              <td class="C3">C3</td>
            </tr>

            <tr>
              <td>C248</td>
              <td class="Nullsec">Nullsec</td>
            </tr>

            <tr>
              <td>C391</td>
              <td class="Lowsec">Lowsec</td>
            </tr>

            <tr>
              <td>D364</td>
              <td class="C2">C2</td>
            </tr>

            <tr>
              <td>D382</td>
              <td class="C2">C2</td>
            </tr>

            <tr>
              <td>D792</td>
              <td class="Highsec">Highsec</td>
            </tr>

            <tr>
              <td>D845</td>
              <td class="Highsec">Highsec</td>
            </tr>

            <tr>
              <td>E175</td>
              <td class="C4">C4</td>
            </tr>

            <tr>
              <td>E545</td>
              <td class="Nullsec">Nullsec</td>
            </tr>

            <tr>
              <td>G024</td>
              <td class="C2">C2</td>
            </tr>

            <tr>
              <td>H121</td>
              <td class="C1">C1</td>
            </tr>

            <tr>
              <td>H296</td>
              <td class="C5">C5</td>
            </tr>

            <tr>
              <td>H900</td>
              <td class="C5">C5</td>
            </tr>

            <tr>
              <td>I182</td>
              <td class="C2">C2</td>
            </tr>

            <tr>
              <td>J244</td>
              <td class="Lowsec">Lowsec</td>
            </tr>

            <tr>
              <td>K162</td>
              <td class="Generic Exit">Generic Exit</td>
            </tr>

            <tr>
              <td>K329</td>
              <td class="Nullsec">Nullsec</td>
            </tr>

            <tr>
              <td>K346</td>
              <td class="Nullsec">Nullsec</td>
            </tr>

            <tr>
              <td>L477</td>
              <td class="C3">C3</td>
            </tr>

            <tr>
              <td>L614</td>
              <td class="C5">C5</td>
            </tr>

            <tr>
              <td>M267</td>
              <td class="C3">C3</td>
            </tr>

            <tr>
              <td>M555</td>
              <td class="C5">C5</td>
            </tr>

            <tr>
              <td>M609</td>
              <td class="C4">C4</td>
            </tr>

            <tr>
              <td>N062</td>
              <td class="C5">C5</td>
            </tr>

            <tr>
              <td>N110</td>
              <td class="Highsec">Highsec</td>
            </tr>

            <tr>
              <td>N290</td>
              <td class="Lowsec">Lowsec</td>
            </tr>

            <tr>
              <td>N432</td>
              <td class="C5">C5</td>
            </tr>

            <tr>
              <td>N766</td>
              <td class="C2">C2</td>
            </tr>

            <tr>
              <td>N770</td>
              <td class="C5">C5</td>
            </tr>

            <tr>
              <td>N968</td>
              <td class="C3">C3</td>
            </tr>

            <tr>
              <td>N944</td>
              <td class="Lowsec">Lowsec</td>
            </tr>

            <tr>
              <td>O128</td>
              <td class="C4">C4</td>
            </tr>

            <tr>
              <td>O477</td>
              <td class="C3">C3</td>
            </tr>

            <tr>
              <td>O883</td>
              <td class="C3">C3</td>
            </tr>

            <tr>
              <td>P060</td>
              <td class="C1">C1</td>
            </tr>

            <tr>
              <td>Q317</td>
              <td class="C1">C1</td>
            </tr>

            <tr>
              <td>R051</td>
              <td class="Lowsec">Lowsec</td>
            </tr>

            <tr>
              <td>R474</td>
              <td class="C6">C6</td>
            </tr>

            <tr>
              <td>R943</td>
              <td class="C2">C2</td>
            </tr>

            <tr>
              <td>S047</td>
              <td class="Highsec">Highsec</td>
            </tr>

            <tr>
              <td>S199</td>
              <td class="Nullsec">Nullsec</td>
            </tr>

            <tr>
              <td>S804</td>
              <td class="C6">C6</td>
            </tr>

            <tr>
              <td>T405</td>
              <td class="C4">C4</td>
            </tr>

            <tr>
              <td>U210</td>
              <td class="Lowsec">Lowsec</td>
            </tr>

            <tr>
              <td>U319</td>
              <td class="C6">C6</td>
            </tr>

            <tr>
              <td>U574</td>
              <td class="C6">C6</td>
            </tr>

            <tr>
              <td>V283</td>
              <td class="Nullsec">Nullsec</td>
            </tr>

            <tr>
              <td>V301</td>
              <td class="C1">C1</td>
            </tr>

            <tr>
              <td>V753</td>
              <td class="C6">C6</td>
            </tr>

            <tr>
              <td>V911</td>
              <td class="C5">C5</td>
            </tr>

            <tr>
              <td>W237</td>
              <td class="C6">C6</td>
            </tr>

            <tr>
              <td>X702</td>
              <td class="C3">C3</td>
            </tr>

            <tr>
              <td>X877</td>
              <td class="C4">C4</td>
            </tr>

            <tr>
              <td>Y683</td>
              <td class="C4">C4</td>
            </tr>

            <tr>
              <td>Y709</td>
              <td class="C1">C1</td>
            </tr>

            <tr>
              <td>Z060</td>
              <td class="Nullsec">Nullsec</td>
            </tr>

            <tr>
              <td>Z142</td>
              <td class="Nullsec">Nullsec</td>
            </tr>

            <tr>
              <td>Z457</td>
              <td class="C4">C4</td>
            </tr>

            <tr>
              <td>Z647</td>
              <td class="C1">C1</td>
            </tr>

            <tr>
              <td>Z971</td>
              <td class="C1">C1</td>
            </tr>
          </tbody>
          </table></div><div id="right"><p>This is test content</p></div>
        </div>
      </body>

CSS:

@font-face {
    font-family: 'Myriad Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
    }
    html {
    font-family:'Myriad Pro Regular';
    font-weight:normal;
    background-color:#CCC;
    }
    @font-face {
    font-family: 'Myriad Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
    }
    #left {
    float:left;
    width:50%;
    }
    #right {
    float:right;
    width:50%;
    }
    table {
    border-collapse: collapse;
    background:#EEE;
    color:#111;
    }
    th, td {
    border: solid 1px #222;
    padding:5px;
    }
    tr:hover {
    background:#CCC;
    }
    tr.highlight {
    background:yellow;
    }
    td.Highsec, td.C1, td.C2 {
    background-color:#468966;
    }
    td.Lowsec, td.C3, td.C4 {
    background-color:#FFB03B;
    }
    td.Nullsec, td.C5, td.C6 {
    background-color:#8E2800;
    }

答案 1 :(得分:0)

你可以像this

那样做

HTML

 <div id="content">
      <div class="leftBar">
<!- your table goes here -->
      </div>
       <div class="rightCnt">
                   test test test tset
       </div>
      <div class="clear"></div>
  </div>

CSS

.leftBar {
    float: left;
}
.rightCnt {
    margin-left: 150px
}
.clear {
    clear: both
}