我有这个简单的代码。
<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。我怎样才能让它看起来更像一张 table 而不是那样分开，并且在中间？ 我创建了一个 http://fiddle.jshell.net/9axbx/ ，我真正想做的就是让表格看起来更好。
最佳答案
以下代码将其设置得更像一个表格:
<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>
这是它的样子:
我不太确定您在寻找什么，但这应该是一个好的开始。你真的应该拥有 <style></style> <head></head> 内的标签您的 html 文档，但出于演示目的，上述内容仍然有效。
编辑:只是关于我所做的更改的注释——
我首先删除了最后几个单元格中文本后的句点。不太清楚你把它们放在那里是为了什么。其次，我添加了text-align:center到你的 CSS。如果您不希望文本居中，您可以将其更改为 text-align:left。使其向左对齐。第三，您不需要边框，如果您不需要边框，只需删除 border CSS 中的选项。最后，我将单元格的宽度更改为 30%，因此它们的宽度应该相同。这使事情变得更加整洁和干净。 100% 使单元格成为表格的整个宽度，我假设您不想要。如果你想让一个单元格占据多列，你应该使用 colspan属性。
关于css - 如何属性调整表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23047484/