私はちょうど私のテーブルのHTML部分を完成し、そのCSS部分で助けが必要です。この表はhttps://www.shiftins.com/test-page-1/のページにあります。HTML5の表スペースとアラインメント
私の問題はアライメントの問題です。 div "tbl-header"をdiv "tbl-content"と整列させる方法を理解できないようです。
また、county/city列とデータセットの開始点の間の空白を、この領域にセル幅をわずかに増やすことで減らす方法を知りたいと思います。すべてを適切に整列させるために、テーブルの両方のセクションでどうすればいいですか？
私が見る最大の問題は、あなたの一番上の行は、あなたのデータの残りの部分とは別の表にあるということです。あなたは、特に各列に幅を割り当てるか、このように同じテーブル内のすべてのものを配置する必要があり、次のいずれかのすべての
<table class="sortable" cellpadding="0" cellspacing="0" border="0" style="width:80%;">
<tbody>
<tr>
<td style="text-align: left;"><strong>County/City</strong></td>
<td style="text-align: left;"><strong>200k</strong></td>
<td style="text-align: left;"><strong>300k</strong></td>
<td style="text-align: left;"><strong>400k</strong></td>
<td style="text-align: left;"><strong>500k</strong></td>
<td style="text-align: left;"><strong>750k</strong></td>
<td style="text-align: left;"><strong>Average</strong></td>
</tr>
<tr>
<td style="text-align: left;">ALAMEDA ALAMEDA</td>
<td style="text-align: left;">813.40</td>
<td style="text-align: left;">1144.72</td>
<td style="text-align: left;">1329.03</td>
<td style="text-align: left;">1636.41</td>
<td style="text-align: left;">2088.74</td>
<td style="text-align: left;">1402.46</td>
</tr>
<tr>
<td style="text-align: left;">ALAMEDA BERKELEY</td>
<td style="text-align: left;">920.11</td>
<td style="text-align: left;">1297.82</td>
<td style="text-align: left;">1519.37</td>
<td style="text-align: left;">1872.77</td>
<td style="text-align: left;">2363.37</td>
<td style="text-align: left;">1594.69</td>
</tr>
<tr>
<td style="text-align: left;">ALAMEDA FREMONT</td>
<td style="text-align: left;">735.92</td>
<td style="text-align: left;">1033.36</td>
<td style="text-align: left;">1203.48</td>
<td style="text-align: left;">1483.00</td>
<td style="text-align: left;">1871.16</td>
<td style="text-align: left;">1265.38</td>
</tr>
</tbody>
</table>
ねえええ、ありがとう。私はそれが "スクロールヘッダー"効果を持つようにしました。それらを1つのテーブルに結合すると、これが削除されます。その周りに他の方法がありますか？ – shictins
まず、テーブルを作成するための勧告は、のヘッダーに入れて避けるようにしてください<div>タグおよび他のテーブル内のデータ、そのよりよいが、このような1つのテーブル構造内のすべての情報を保持：
<table>
<tr>
<th>title1</th>
<th>title2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>
<th>
タグは、テーブル見出し、<tr>テーブルRでありますあなたのテーブルのサイズが合わない理由ですOWSと<td>テーブルデータ
ので、後のあなたは、テーブルのCSSスタイルを追加することができ、この変更を行ったと行http://www.w3schools.com/css/css_table.asp
行うにはどのようにありがとうございます。ありがとうございます。しかし、テーブルを下に移動すると、私はどのようにして
これをチェックするhttps://jsfiddle.net/dPixie/byB9d/3/ –
のサイズで動作します（X）HTML5テーブル：
<table>
<colgroup style="width: 10%;"></colgroup>
<colgroup style="width: 30%;"></colgroup>
<colgroup style="width: 20%;"></colgroup>
<colgroup style="width: 20%;"></colgroup>
<colgroup style="width: 20%;"></colgroup>
<thead>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
</thead>
<tfoot>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
</tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</tbody>
</table>
あなたが固定ヘッダが必要な場合は、すべてが並ぶとなるように2つのテーブルを使用して固定幅を割り当てる必要があります。
あなた `td`が台無しにされた` <左TDで<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table alignment</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="author" content="shawn">
<style>
.aligned td{
width:14% !important;
}
.aligned{
width:70%;
margin-left:auto;
margin-right:auto;
}
.header{
background:#0000ff;
color:#fff;
line-height:30px;
height:30px;
font-weight:bold;
width:70%;
left:15%;
top:0;
position:fixed;
}
.clr30{
clear:both;
height:30px;
}
</style>
</head>
<body>
<table class="aligned header">
<tbody>
<tr>
<td>County/City</td>
<td>200k</td>
<td>300k</td>
<td>400k</td>
<td>500k</td>
<td>750k</td>
<td>Average</td>
</tr>
</tbody>
</table>
<div class="clr30"></div>
<table class="aligned">
<tbody>
<tr>
<td>ALAMEDA ALAMEDA</td>
<td>813.40</td>
<td>1144.72</td>
<td>1329.03</td>
<td>1636.41</td>
<td>2088.74</td>
<td>1402.46</td>
</tr>
<tr>
<td>ALAMEDA BERKELEY</td>
<td>920.11</td>
<td>1297.82</td>
<td>1519.37</td>
<td>1872.77</td>
<td>2363.37</td>
<td>1594.69</td>
</tr>
<tr>
<td>ALAMEDA FREMONT</td>
<td>735.92</td>
<td>1033.36</td>
<td>1203.48</td>
<td>1483.00</td>
<td>1871.16</td>
<td>1265.38</td>
</tr>
<tr>
<td>ALAMEDA HAYWARD</td>
<td>779.26</td>
<td>1091.57</td>
<td>1269.92</td>
<td>1565.50</td>
<td>1993.72</td>
<td>1339.99</td>
</tr>
<tr>
<td>ALAMEDA LIVERMORE</td>
<td>689.70</td>
<td>973.33</td>
<td>1140.16</td>
<td>1410.07</td>
<td>1762.98</td>
<td>1195.25</td>
</tr>
</tbody>
</table>
</html>
</body>
あなたのコード;」= "" スタイル= "「テキスト整列：" ' – dippas
Dippasねえ！申し訳ありませんが、あなたが参照しているものは表示されません – shictins
画像とリンクだけでなく、コードを投稿してください。リンクが悪くなった場合、これは今後の訪問者には役に立たない、この質問は誰にも役立たないでしょう。 –