Question

我一直在尝试整个早上复制下面但是我无法使对齐正确，似乎一行将匹配最大td的高度，我需要尽可能复制这个像素。

enter image description here

以下是我的HTML，

<table cellspacing="0" cellpadding="0" border="0" align="center" style="height: 268px; width: 700px;">  
<thead>  
<tr>  
<th valign="middle" align="center" style="height: 27px;" scope="col">Information</th>  
<th valign="middle" align="center" style="height: 27px;" scope="col">Education &amp; Training</th>  
<th valign="middle" align="center" style="height: 27px;" scope="col">Marketing Services</th>  
<th valign="middle" align="center" style="height: 27px;" scope="col">Digital Media</th>  
<th valign="middle" align="center" style="height: 27px;" scope="col">Entertainment</th>  
<th valign="middle" align="center" style="height: 27px;" scope="col">Business Services</th>  
</tr>  
</thead>  
<tbody>  
<tr>  
<td valign="middle" align="center" style="height: 27px;">Academic</td>
<td valign="middle" align="center" style="height: 27px;">For-profit schools</td>
<td valign="middle" align="center" style="height: 27px;">Agency</td>
<td valign="middle" align="center" style="height: 27px;">Internet</td>
<td valign="middle" align="center" style="height: 27px;">TV and Radio Broadcasting</td>
<td valign="middle" align="center" style="height: 27px;">Business Process Outsourcing</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">STM</td>
<td valign="middle" align="center" style="height: 27px;">Educational Technology</td>
<td valign="middle" align="center" style="height: 27px;">Digital</td>
<td valign="middle" align="center" style="height: 27px;">Mobile Distribution</td>
<td valign="middle" align="center" style="height: 27px;">Cinema</td>
<td valign="middle" align="center" style="height: 27px;">B2B Services</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Financial</td>
<td valign="middle" align="center" style="height: 27px;">Educational Services</td>
<td valign="middle" align="center" style="height: 27px;">Market Research</td>
<td valign="middle" align="center" style="height: 27px;">Online Gaming</td>
<td valign="middle" align="center" style="height: 27px;">Film, TV, Music and Sports Content and Rights</td>
<td valign="middle" align="center" style="height: 27px;">SaaS</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Business</td>
<td valign="middle" align="center" style="height: 27px;">Professional Training</td>
<td valign="middle" align="center" style="height: 27px;">Outdoor</td>
<td valign="middle" align="center" style="height: 27px;">Social Media</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Trade</td>
<td valign="middle" align="center" style="height: 27px;">Vocational Training</td>
<td valign="middle" align="center" style="height: 27px;">Public Relations</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Consumer</td>
<td valign="middle" align="center" style="height: 27px;">Sales Promotion</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Professional</td>
<td valign="middle" align="center" style="height: 27px;">Direct Marketing</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Lead Generation</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">&nbsp;</td>
<td valign="middle" align="center" style="height: 27px;">&nbsp;</td>
</tr>
</tbody>
</table>

和我的CSS，

#left table {
    border:0 none;
}

#left th {
    height:43px;
    background:url(images/th_bg.jpg) top left repeat-x;
    font-size:14px;
    color:#fff;
    font-family:"Times", "Times New Roman", "Serif";
}

#left tbody td {
    text-align:center;
    background:#99abb9;
    border-right:1px solid #fff;
    width:105px;
    padding:10px 15px 0px 15px;
    height:17px;
}

Answer 1

对我来说只看两行。标题行th代码和单行td代码，每行都有一个项目列表。

Answer 2

您尝试在每个条目中创建一个表行，但在图片上看起来只有两行。一个用于标题，一个用于数据（由<br />或<p>...</p>分隔的数据）。

这是一个缩短的示例（较少的列，只有基本的格式 - 您必须添加其余的）只是为了展示它是如何工作的：

<style type='text/css'>
   thead > tr > td {
      text-align:center;
      vertical-align:middle;
      background-color:#777777;
      width:107px;
   }
   tbody > tr > td {
      text-align:center;
      background-color:#99abb9;
   }
</style>

<table cellspacing="2px" border="0">
   <thead>
      <tr>
         <td>Information</td>
         <td>Education &amp; Training</td>
         <td>Marketing Services</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            Academic<br /><br />
            STM<br /><br />
            Financial<br /><br />
            Business<br /><br />
            ...
         </td>
         <td>
            For-profit schools<br /><br />
            Educational Technology<br /><br />
            Educational Services<br /><br />
            ...
         </td>
         <td>
            Agency<br /><br />
            Digital<br /><br />
            Market Research<br /><br />
            Outdoor<br /><br />
            Public Relations
         </td>
      </tr>
   </tbody>
</table>

Answer 3

我在http://dcm.net46.net/test/so/so.html做了一个完全正常的演示。为了使所有列的高度相同，我只用空td s填充了额外的空格。为了设置列的样式，我使用了colgroup和col元素。其余的很容易。

HTML表格复制样本图像

3 个答案: