Question

我有这个简单的代码。

<div class="rating" >
<table>
<tr>
     <th> Award </th>
     <th> Winner </th>
     <th> Runner-up </th>    
</tr>
<tr>
    <td> Starburst Award </td>
    <td> #winner </td>
    <td> #runner-up#</td>
</tr>
<tr>
    <td> Rising Star Award </td>
    <td> #winner </td>
    <td> #runner-up#</td>

</tr>
 <tr>
    <td> Shooting Star Award  </td>
    <td> #winner </td>
    <td> #runner-up#</td>

</tr>   
 <tr>
    <td> Shining Star Award </td>
    <td> #winner......................... </td>
    <td> #runner-up#.....................................</td>

</tr>   
</table>
</div>
table.rating, th,tr,td
{
 width:100%;   
border-collapse:collapse;
    border:1px solid black; height:50px;
    border:1px solid black;
}

使用css我想做得更好。我怎么能拥有它看起来更像一张桌子而不是那样分开，并且在中间？我创建了一个http://fiddle.jshell.net/9axbx/，我真正想做的就是让桌子看起来更好。

Answer 1

以下代码将其设置为更像表：

<div class="rating" >
<table border="1">
<tr>
 <th> Award </th>
 <th> Winner </th>
 <th> Runner-up </th>    
</tr>
<tr>
 <td> Starburst Award </td>
 <td> #winner </td>
 <td> #runner-up#</td>
</tr>
<tr>
 <td> Rising Star Award </td>
 <td> #winner </td>
 <td> #runner-up#</td>

</tr>
<tr>
 <td> Shooting Star Award  </td>
 <td> #winner </td>
 <td> #runner-up#</td>

</tr>   
<tr>
 <td> Shining Star Award </td>
 <td> #winner</td>
 <td> #runner-up#</td>

</tr>   
</table>
</div>
<style type="text/css">
  table.rating, th,tr,td
  {
    width: 30%;
    border-collapse:collapse;
    border:1px solid black; 
    height:50px;
    border:1px solid black;
    text-align: center;
  }
</style>

这就是它的样子：

enter image description here

我不太确定你在寻找什么，但这应该是一个好的开始。您确实应该在html文档的<style></style>中包含<head></head>标记，但出于演示目的，上述内容仍然有效。

编辑：请注意我所做的更改 -

我首先删除了最后几个单元格中文本之后的句点。不太确定你把它们放在那里。其次，我在您的CSS中添加了text-align:center。如果您不希望文本居中，则可以将其更改为text-align:left以将其与左侧对齐。第三，你不需要边框，如果你不想要，只需从CSS中删除border选项。最后，我将单元格的宽度更改为30％，因此它们都应该是相同的宽度。这使得东西更整洁，更清洁。 100％使一个单元格成为桌子的整个宽度，我认为你不想要。如果您希望单元格占用多个列，则应使用colspan属性。

如何正确调整表？

1 个答案: