html - 如何在等宽的表格内制作 TD

Question

我有以下布局。我想要所有的 TD 宽度相等，周围有额外的空间。

如果我在 TD 上使用 float:left; 所有大小都相同，但 vertical-align: middle; 停止工作。

有没有一种方法可以不使用 float:left; 来实现？

<table class="student_table">
    <tr>
        <th class="class_box" colspan="4">Batch 2012</th>
    </tr>
    <tr class="batch_header">
        <td> Hi </td> <!--Have to center this-->
        <td> Hi </td>
        <td> Hi </td>
        <td> Hi </td>
    </tr>

.batch_header{
    width: 245px;
    display: inline-block;
}
.batch_header td{
    width:30px;
    height:30px;
    background-color:#EEE;
    margin:0px;
    padding:2.5px;
    border:0px;
    <!-- float:left; --> <!-- < equally sized with this but not vertically aligned is not working-->
    font-weight: bold;
    font-size: smaller;
    text-align:center;
    vertical-align: middle; <!-- < This is not working-->
}

Answer 1

不需要 CSS，因为您有时会使用表格和自己的表格

这是给你的 table

<table>
<tr>
    <th colspan="4" align="center" valign="middle" bgcolor="#CCCCCC">Batch 2012</th>
</tr>
<tr>
    <td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td> 
    <td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
    <td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
    <td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
</tr>
</table>

这是为您更新的演示

https://jsfiddle.net/1zhdLb55/3/

编辑如果您现在不想固定宽度，只需删除 width:100px;它仍然会给你左右的空间。如果您不想要边框，只需添加 border:0 cellspacing:0 等