-1
HTMLとCSSを使用してテーブルを作成しました。初心者のため、同じ座標に2つのテーブルを配置する方法がありません。ここで
2つの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;">✔</td>
<td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">✔</td>
</tr>
<tr>
<td>LED tail lights</td>
<td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">✔</td>
<td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">✔</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;">✔</td>
<td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">✔</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;">✔</td>
<td align="center" style="text-align:center; font-size:150%; font-weight:bold; color:green;">✔</td>
</tr>
<tr>
<td>Speedometer</td>
<td>Digital</td>
<td>Digital</td>
</tr>
</tbody>
</table>
</div>
</section>エンドは、あなたがコードを実行することによって見ることができる結果サンプルはブラウザとして正確な出力を与えています。どんな返事でも感謝の気持ちになります。
あなたは、ヘッダーのために別のテーブルをいけません。私はちょうど同じ
@Hasant Safderこれでスクロールバーが削除されます。私が間違っていないなら、あなたは一度テーブルタグを作成して一度閉じることですが、それは解決策ではありません。私もスクロールバーが必要 – Stone
私は今スクロールで自分の答えを編集しました。 –
float: left;を追加して、これはあなたの問題を解決します。出典
2017-08-30 07:41:15
こちらをご覧ください。ここで実行しているコード出力を見れば、間違っているとは限りません – Stone
これは、彼らの間に2つのテーブルとの同期を行うための最善のアプローチではありません、あなたが固定ヘッダおよびスクロール可能なテーブル本体のコンテンツを持つテーブルを作りたいならば、ここ
を見て出典
2017-08-30 07:41:28
関連する問題