Question

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

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

修改问题是间距;表本身不是问题，但只是在单元格上设置对齐将无法正常工作;细胞之间的自由空间不是100％在细胞之间平均分配。

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

Answer 1

HTML only version

<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已设置，因为如果您严格希望宽度相同，那么除了强制滚动条之外，您可以做的事情并不多（据我所知）太长了。

带有居中单元格的html表

4 个答案: