带有居中单元格的 html 表格

Question

基本上我想要的是一个表格，一行，5个单元格...第一个/左单元格应该左对齐，最后一个/右单元格应该右对齐，中间3个单元格需要居中每个单元格之间的间距相等。表格本身是“100% 宽度，这就是单元格间距的来源。

我将如何写这个（使用 html / css）？ “table”标签或“divs”等都是有效的，只要最终结果看起来正确，我并不介意采用哪种方法。

编辑： 问题是间距；表格本身不是问题，但仅在单元格上设置对齐方式将无法正常工作；单元格之间的空闲空间不是 100% 在单元格之间平均分配的。

我也不想指定单元格宽度，因为内容是动态的，并且无法事先知道需要多少宽度。

Answer 1

仅 HTML 版本

<table>
<tr>
   <td width="20%"></td>
   <td width="20%" align="center"></td>
   <td width="20%" align="center"></td>
   <td width="20%" align="center"></td>
   <td width="20%" align="right"></td>
</tr>
</table>

CSS 版本

<table>
<tr>
   <td style="width:20%;"></td>
   <td style="width:20%; text-align:center"></td>
   <td style="width:20%; text-align:center"></td>
   <td style="width:20%; text-align:center"></td>
   <td style="width:20%; text-align:right"></td>
</tr>
</table>

Answer 2

如果您使用的是表格，请为每个单元格分配唯一的 id，然后根据需要使用 css 进行对齐，例如

HTML：

<td id="firstcell">...</td>
<td id="secondcell">...</td>
<td id="thirdcell">...</td>
<td id="fourthcell">...</td>
<td id="fifthcell">...</td>

CSS：

table {table-layout:fixed;}  /* ensure the widths are absolutely fixed at the specified width*/
td{ width: 20%;}  /* allocate space evenly between all 5 cells */
td#firstcell {text-align:left;}
td#secondcell, td#thirdcell, td#fourthcell {text-align:center;}
td#fifthcell {text-align:right;}

Answer 3

td
{
    text-align:center;

}
td:first-child
{
    text-align:left;   
}

td:last-child
{
    text-align:right;
}

Answer 4

<style type="text/css">
.five_columns {
    width: 100%;
}
.five_columns > div {
    width: 20%;
    float: left;
    text-align: center;
    overflow: auto;
}
.five_columns > div:first-child {
    text-align: left;
}
.five_columns > div:last-child {
    text-align: right;
}
</style>
<div class="five_columns">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

overflow: auto 已设置，因为如果您严格希望宽度相同，那么除了在任何东西上强制滚动条之外，您真的无能为力（据我所知）长。