我剛剛完成了我的表格的html部分，需要關於它的css部分的幫助。該表可在此頁面找到：https://www.shiftins.com/test-page-1/。HTML5表格間距和對齊方式
我的問題是與對齊。我似乎無法弄清楚如何得到 div「tbl-header」與div「tbl-content」對齊。
另外，我想知道如何通過略微增加單元格寬度到這個空間來減少縣/市列和數據集的開始之間的空白。我將如何去做這兩部分的表，以保持一切正確對齊？
我看到的最大的問題是你的最上面一行是在不同的表比你的數據的其餘部分。你要麼需要特別指定的寬度，以每列，或者把一切都在同一個表是這樣的：
<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>標籤和其他表中的數據，其更好地把所有的信息在一個表的結構是這樣的：
<table>
<tr>
<th>title1</th>
<th>title2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>
一個<th>標籤是表格標題，<tr>表[R OWS，這就是爲什麼你的表的大小不適合，所以做出這種改變，你可以添加你的表的CSS樣式，並與行http://www.w3schools.com/css/css_table.asp
真棒解釋謝謝。但是，我如何讓
檢查此小提琴https://jsfiddle.net/dPixie/byB9d/3/ –
大小的工作原理後做<td>表數據
一（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個表，並指定固定寬度，這樣一切都會排隊。
<!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>
你在你的'td'代碼搞砸'<左運輸署;」 = 「」 風格=「「文本對齊：」' – dippas
嘿Dippas！對不起，我沒有看到你指的是 – shictins
發佈你的代碼，不僅僅是一個圖像和鏈接，如果鏈接不好，這對未來的訪問者沒有好處，這個問題對任何人都沒有幫助。 –