Question

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

如果我使用float:left;而不是TD，则所有内容的大小相同但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>
<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/

EDIT 如果你现在不想要固定宽度，只需删除宽度：100px;它仍然会给你左右空间。如果你不想要边框，只需添加border：0 cellspacing：0 etc

Answer 2

将line-height: 1.9;添加到.batch_header td{}

.batch_header{
    width: 140px;
    float: left;
}
.batch_header td{
    width:30px;
    height:25px;
    background-color:#EEE;
    margin:0px auto;
    float:left;
    padding:2.5px;
    border:0px;
    font-weight: bold;
    font-size: smaller;
    text-align:center;    
    vertical-align: middle;
    line-height: 1.9;
}

<table class="student_table" border = 1>
    <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>
</table>

请参阅Demo

Answer 3

仅使用HTML

<table width="100%">
<tr>
    <th colspan="4" align="center" valign="middle">Batch 2012</th>
</tr>
<tr>
    <td width="25%" align="center" valign="middle"> Hi </td> 
    <td width="25%" align="center" valign="middle"> Hi </td>
    <td width="25%" align="center" valign="middle"> Hi </td>
    <td width="25%" align="center" valign="middle"> Hi </td>
</tr>
</table>

Answer 4

尝试将样式table-layout:fixed添加到表css样式（.student_table）并确保表具有设置的宽度。移除float:left和td宽度（它将计算所有单元格的相等宽度）并移除display: inline-block标记上的<tr>。

如何在宽度相等的表格内制作TD

4 个答案: