Question

我刚刚完成了表格的html部分，需要帮助它的css部分。该表格可在此页面上找到：https://www.shiftins.com/test-page-1/。

我的问题在于调整。我似乎无法弄清楚如何得到 div“tbl-header”与div“tbl-content”对齐。

此外，我想知道如何通过将单元格宽度稍微增加到此空间来减少县/城市列与数据集开头之间的空白区域。我将如何为表格的两个部分执行此操作以使所有内容保持正确对齐？

Answer 1

我看到的最大问题是您的第一行与其他数据位于不同的表格中。您需要专门为每列指定宽度，或者将所有内容放在同一个表中，如下所示：

<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>

Answer 2

首先，建议创建表，尽量避免在<div>标记中放入标题和其他表中的数据，最好将所有信息保存在一个表结构中，如下所示：

<table>
  <tr>
    <th>title1</th>
    <th>title2</th> 
  </tr>
  <tr>
    <td>data1</td>
    <td>data2</td> 
  </tr>
</table>

<th>标记是表格标题，<tr>表格行和<td>表格数据

这就是为什么你的桌子大小不适合的原因，所以在做了这个改变后你可以添加你的桌子的css样式并使用行http://www.w3schools.com/css/css_table.asp的大小

Answer 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>

Answer 4

如果你想要固定的标题，你需要使用2个表并分配固定的宽度，这样一切都会排成一行。

jsFiddle

<!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>

HTML5表格间距和对齐

4 个答案: