1. 首頁
  2. 問答
  3. 無法將這兩個HTML表格放在正確的位置

無法將這兩個HTML表格放在正確的位置

2017-08-30 81 views
-1

我已經創建了一個使用HTML和CSS的表格，而且我是初學者，我沒有辦法將兩個表格放在相同的座標中。
無法將這兩個HTML表格放在正確的位置

下面是兩個表我的HTML & CSS代碼，並可以運行代碼來獲得結果：

<style> 
 
table{ 
 
       width: 50%; 
 
       table-layout: fixed 
 
      } 
 
.table-content{ 
 
       height:300px; 
 
       overflow-x:auto; 
 
       margin-top: 0px; 
 
       border: 1px solid rgba(255,255,255,0.3); 
 
      } 
 
      th{ 
 
       padding: 20px 15px; 
 
       text-align: center; 
 
       font-weight: 500; 
 
       font-size: 12px; 
 
       color: #fff; 
 
       text-transform: uppercase; 
 
      } 
 
      td{ 
 
       padding: 15px; 
 
       text-align: center; 
 
       vertical-align: middle; 
 
       font-weight: 300; 
 
       font-size: 12px; 
 
       color: #fff; 
 
       border-bottom: solid 1px rgba(255,255,255,0.1); 
 
      } 
 
      #table-header{ 
 
       background-color: rgba(255,255,255,0.3); 
 
      } 
 
      section{ 
 
       margin: 50px; 
 
      } 
 
      ::-webkit-scrollbar { 
 
       width: 6px; 
 
      } 
 
      ::-webkit-scrollbar-track { 
 
       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
      } 
 
      ::-webkit-scrollbar-thumb { 
 
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
      } 
 
</style>
<section> 
 
     <div class="table-header"> 
 
      
 
      <!--Creating The First TAble Of Headings--> 
 
      
 
      
 
      <table cellpadding="0" cellspacing="0" border="1"> 
 
       <thead> 
 
        <tr> 
 
         <th>Features</th> 
 
         <th>Fireblade</th> 
 
         <th>SP</th> 
 
        </tr> 
 
       </thead> 
 
      </table> 
 
     </div> 
 
     <div class="table-content"> 
 
      
 
      <!--Creating The Second TAble Of Contents--> 
 
      
 
      <table cellpadding="0" cellspacing="0" border="1"> 
 
       <tbody> 
 
        <tr> 
 
         <td>Starting</td> 
 
         <td>Self Start Only</td> 
 
         <td>Self Start Only</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Wheels Type</td> 
 
         <td>Alloy</td> 
 
         <td>Alloy</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Tyre Type</td> 
 
         <td>Tubeless</td> 
 
         <td>Tubeless</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Standard Warranty</td> 
 
         <td>2</td> 
 
         <td>2</td> 
 
        </tr> 
 
        <tr> 
 
         <td>ABS</td> 
 
         <td>YES</td> 
 
         <td>YES</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Tachometer</td> 
 
         <td>Digital</td> 
 
         <td>Digital</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Low Fuel Warning Lamp</td> 
 
         <td>YES</td> 
 
         <td>YES</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Pilot Lamps</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
        </tr> 
 
        <tr> 
 
         <td>LED tail lights</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Projector head light</td> 
 
         <td>Multi-Reflector Type Angel eye HID Projector</td> 
 
         <td>Multi-Reflector Type Angel eye HID Projector</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Body Graphics</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Trip Meter</td> 
 
         <td>Digital</td> 
 
         <td>Digital</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Clock</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Speedometer</td> 
 
         <td>Digital</td> 
 
         <td>Digital</td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
     </section>

最終的結果，你可以通過運行代碼見它將樣本作爲瀏覽器提供確切的輸出。任何迴應將迎接THANKYOU !!!!

來源

2017-08-30 Stone

回答

0

刪除頂部的「」。這是造成問題，以對齊他們。

<style> 
 
table{ 
 
       width: 50%; 
 
       table-layout: fixed 
 
      } 
 
.table-content{ 
 
       height:300px; 
 
       overflow-x:auto; 
 
       margin-top: 0px; 
 
       border: 1px solid rgba(255,255,255,0.3); 
 
      } 
 
      th{ 
 
       padding: 20px 15px; 
 
       text-align: center; 
 
       font-weight: 500; 
 
       font-size: 12px; 
 
       color: #fff; 
 
       text-transform: uppercase; 
 
      } 
 
      .table-header{ 
 
       overflow-y: auto; 
 
       height: 200px; 
 
      } 
 
      td{ 
 
       padding: 15px; 
 
       text-align: center; 
 
       vertical-align: middle; 
 
       font-weight: 300; 
 
       font-size: 12px; 
 
       color: #fff; 
 
       border-bottom: solid 1px rgba(255,255,255,0.1); 
 
      } 
 
      #table-header{ 
 
       background-color: rgba(255,255,255,0.3); 
 
      } 
 
      section{ 
 
       margin: 50px; 
 
      } 
 
      ::-webkit-scrollbar { 
 
       width: 6px; 
 
      } 
 
      ::-webkit-scrollbar-track { 
 
       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
      } 
 
      ::-webkit-scrollbar-thumb { 
 
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
      } 
 
</style>
<section> 
 
     <div class="table-header"> 
 
      
 
      <!--Creating The First TAble Of Headings--> 
 
      
 
      
 
      <table cellpadding="0" cellspacing="0" border="1"> 
 
       <thead> 
 
        <tr> 
 
         <th>Features</th> 
 
         <th>Fireblade</th> 
 
         <th>SP</th> 
 
        </tr> 
 
       </thead> 
 
      
 
    
 
      
 
      <!--Creating The Second TAble Of Contents--> 
 
      
 
      
 
       <tbody> 
 
        <tr> 
 
         <td>Starting</td> 
 
         <td>Self Start Only</td> 
 
         <td>Self Start Only</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Wheels Type</td> 
 
         <td>Alloy</td> 
 
         <td>Alloy</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Tyre Type</td> 
 
         <td>Tubeless</td> 
 
         <td>Tubeless</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Standard Warranty</td> 
 
         <td>2</td> 
 
         <td>2</td> 
 
        </tr> 
 
        <tr> 
 
         <td>ABS</td> 
 
         <td>YES</td> 
 
         <td>YES</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Tachometer</td> 
 
         <td>Digital</td> 
 
         <td>Digital</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Low Fuel Warning Lamp</td> 
 
         <td>YES</td> 
 
         <td>YES</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Pilot Lamps</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
        </tr> 
 
        <tr> 
 
         <td>LED tail lights</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Projector head light</td> 
 
         <td>Multi-Reflector Type Angel eye HID Projector</td> 
 
         <td>Multi-Reflector Type Angel eye HID Projector</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Body Graphics</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Trip Meter</td> 
 
         <td>Digital</td> 
 
         <td>Digital</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Clock</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Speedometer</td> 
 
         <td>Digital</td> 
 
         <td>Digital</td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
     </section>

來源

2017-08-30 07:39:28

+0

你不單獨表頭。我只是將和合併在一個相同的

中。 –

+0

@Hasant Safder這將導致刪除滾動條。如果我沒有錯，你一次創建表標籤並關閉一次，但它不是溶劑。我也需要滾動條 – Stone

+0

我已經用滾動編輯了我的答案。 –

0

添加float: left;，這將解決您的問題。

table{ 
 
       width: 50%; 
 
       table-layout: fixed; 
 
        float: left; 
 
      } 
 
.table-content{ 
 
       height:300px; 
 
       overflow-x:auto; 
 
       margin-top: 0px; 
 
       border: 1px solid rgba(255,255,255,0.3); 
 
      } 
 
      th{ 
 
       padding: 20px 15px; 
 
       text-align: center; 
 
       font-weight: 500; 
 
       font-size: 12px; 
 
       color: #fff; 
 
       text-transform: uppercase; 
 
      } 
 
      td{ 
 
       padding: 15px; 
 
       text-align: center; 
 
       vertical-align: middle; 
 
       font-weight: 300; 
 
       font-size: 12px; 
 
       color: #fff; 
 
       border-bottom: solid 1px rgba(255,255,255,0.1); 
 
      } 
 
      #table-header{ 
 
       background-color: rgba(255,255,255,0.3); 
 
      } 
 
      section{ 
 
       margin: 50px; 
 
      } 
 
      ::-webkit-scrollbar { 
 
       width: 6px; 
 
      } 
 
      ::-webkit-scrollbar-track { 
 
       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
      } 
 
      ::-webkit-scrollbar-thumb { 
 
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
      }
<section> 
 
     <div class="table-header"> 
 
      
 
      <!--Creating The First TAble Of Headings--> 
 
      
 
      
 
      <table cellpadding="0" cellspacing="0" border="1"> 
 
       <thead> 
 
        <tr> 
 
         <th>Features</th> 
 
         <th>Fireblade</th> 
 
         <th>SP</th> 
 
        </tr> 
 
       </thead> 
 
      </table> 
 
     </div> 
 
     <div class="table-content"> 
 
      
 
      <!--Creating The Second TAble Of Contents--> 
 
      
 
      <table cellpadding="0" cellspacing="0" border="1"> 
 
       <tbody> 
 
        <tr> 
 
         <td>Starting</td> 
 
         <td>Self Start Only</td> 
 
         <td>Self Start Only</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Wheels Type</td> 
 
         <td>Alloy</td> 
 
         <td>Alloy</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Tyre Type</td> 
 
         <td>Tubeless</td> 
 
         <td>Tubeless</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Standard Warranty</td> 
 
         <td>2</td> 
 
         <td>2</td> 
 
        </tr> 
 
        <tr> 
 
         <td>ABS</td> 
 
         <td>YES</td> 
 
         <td>YES</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Tachometer</td> 
 
         <td>Digital</td> 
 
         <td>Digital</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Low Fuel Warning Lamp</td> 
 
         <td>YES</td> 
 
         <td>YES</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Pilot Lamps</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
        </tr> 
 
        <tr> 
 
         <td>LED tail lights</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Projector head light</td> 
 
         <td>Multi-Reflector Type Angel eye HID Projector</td> 
 
         <td>Multi-Reflector Type Angel eye HID Projector</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Body Graphics</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Trip Meter</td> 
 
         <td>Digital</td> 
 
         <td>Digital</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Clock</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
         <td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">&#10004;</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Speedometer</td> 
 
         <td>Digital</td> 
 
         <td>Digital</td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
     </section>

來源

2017-08-30 07:41:15

+0

瞭解更多關於溢出的問題你能否看到你的代碼輸出bu在這裏運行它並沒有給出錯誤 – Stone

0

這是不是讓他們之間的兩個表和同步的最佳方法，如果你想用固定頭和可滾動表身內容的表，然後看看這裏

html, body{ 
 
    margin:0; 
 
    padding:0; 
 
    height:100%; 
 
} 
 
section { 
 
    position: relative; 
 
    border: 1px solid #000; 
 
    padding-top: 37px; 
 
    background: #500; 
 
} 
 
section.positioned { 
 
    position: absolute; 
 
    top:100px; 
 
    left:100px; 
 
    width:800px; 
 
    box-shadow: 0 0 15px #333; 
 
} 
 
.container { 
 
    overflow-y: auto; 
 
    height: 200px; 
 
} 
 
table { 
 
    border-spacing: 0; 
 
    width:100%; 
 
} 
 
td + td { 
 
    border-left:1px solid #eee; 
 
} 
 
td, th { 
 
    border-bottom:1px solid #eee; 
 
    background: #ddd; 
 
    color: #000; 
 
    padding: 10px 25px; 
 
} 
 
th { 
 
    height: 0; 
 
    line-height: 0; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
    color: transparent; 
 
    border: none; 
 
    white-space: nowrap; 
 
} 
 
th div{ 
 
    position: absolute; 
 
    background: transparent; 
 
    color: #fff; 
 
    padding: 9px 25px; 
 
    top: 0; 
 
    margin-left: -25px; 
 
    line-height: normal; 
 
    border-left: 1px solid #800; 
 
} 
 
th:first-child div{ 
 
    border: none; 
 
}
<section class=""> 
 
    <div class="container"> 
 
    <table> 
 
     <thead> 
 
     <tr class="header"> 
 
      <th> 
 
      Table attribute name 
 
      <div>Table attribute name</div> 
 
      </th> 
 
      <th> 
 
      Value 
 
      <div>Value</div> 
 
      </th> 
 
      <th> 
 
      Description 
 
      <div>Description</div> 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>align</td> 
 
      <td>left, center, right</td> 
 
      <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td> 
 
     </tr> 
 
     <tr> 
 
      <td>bgcolor</td> 
 
      <td>rgb(x,x,x), #xxxxxx, colorname</td> 
 
      <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td> 
 
     </tr> 
 
     <tr> 
 
      <td>border</td> 
 
      <td>1,""</td> 
 
      <td>Specifies whether the table cells should have borders or not</td> 
 
     </tr> 
 
     <tr> 
 
      <td>cellpadding</td> 
 
      <td>pixels</td> 
 
      <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td> 
 
     </tr> 
 
     <tr> 
 
      <td>cellspacing</td> 
 
      <td>pixels</td> 
 
      <td>Not supported in HTML5. Specifies the space between cells</td> 
 
     </tr> 
 
     <tr> 
 
      <td>frame</td> 
 
      <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td> 
 
      <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td> 
 
     </tr> 
 
     <tr> 
 
      <td>rules</td> 
 
      <td>none, groups, rows, cols, all</td> 
 
      <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td> 
 
     </tr> 
 
     <tr> 
 
      <td>summary</td> 
 
      <td>text</td> 
 
      <td>Not supported in HTML5. Specifies a summary of the content of a table</td> 
 
     </tr> 
 
     <tr> 
 
      <td>width</td> 
 
      <td>pixels, %</td> 
 
      <td>Not supported in HTML5. Specifies the width of a table</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</section>

來源

2017-08-30 07:41:28

相關問題

 相關問題