Question

我在将一些文字放在表格中时遇到了问题。

我有两列colspan="4" - first column和second column：

看起来应该是这样的：

first column   second column
some text      Value   Currency
                 100   USD
                3000   USD

但是，正如我已经做到的那样，它看起来像是：

first column   second column
some text             Value  Currency
                        100  USD
                       3000  USD
                      12000  USD
                        400  USD

这是我的真实代码：

 <tr>
   <td colspan="4">
     First column
  </td>
   <td colspan="4">
     Second column
  </td>
</tr>
     <tr class="empty"><td colspan="8">&nbsp;</td></tr>
     <tr>
        <td colspan="4">
           <?php echo 'Price';?>:
        </td>

        <td colspan='1' style="text-align: right">
            <?php echo 'Value';?>
        </td>
        <td style="padding-left:10px" colspan='1' >
            <?php echo 'Currency';?>
        </td>
        <td colspan='2'>&nbsp;</td>    
    </tr>
 <tr>
    <td colspan="4">
       </td>
       <td colspan="1" style="text-align: right"><?php echo $price; ?></td>
       <td colspan="1" class="pull-right"><?php echo $currency; ?></td>
       <td colspan="2" style="height:10px;">&nbsp;</td>
 </tr>

.pull-right {
                padding-left: 10px;   
            }

Answer 1

此代码存在一些问题。首先，您应该始终将行嵌套在表中。其次，你所拥有的价值和货币应该是一个嵌套的表，但是你试图在没有正确的html的情况下重现那种布局。尝试使用以下模板来完成目标。我测试了它，它确实产生了你要求的确切布局。

<table>
    <tr>
        <td colspan="2" style="text-align: center;">
            First Column
        </td>
        <td colspan="2" style="text-align: center;">
            Second Column
        </td>
    </tr>
    <tr>
        <td colspan="2" style="vertical-align:top;text-align: center;">
            Some Text
        </td>
        <td colspan="2">
            <table style="text-align: center; width: 100%">
                <tr>
                    <td>
                        Value
                    </td>
                    <td>
                        Currency
                    </td>
                </tr>
                <tr>
                    <td>
                        100
                    </td>
                    <td>
                        USD
                    </td>
                </tr>
                <tr>
                    <td>
                        3000
                    </td>
                    <td>
                        USD
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

这是结果（添加了边框）：

Answer 2

您需要移除<td colspan="2" style="height:10px;"> </td>才能获得所需的结果。而不是在其他列上使用<td colspan='1'>，而是使用<td colspan='2'>。

<强> HTML

<table>
<tr>
   <td colspan="4">
     First column
  </td>
   <td colspan="4">
     Second column
  </td>
</tr>
     <tr class="empty"><td colspan="8">&nbsp;</td></tr>
     <tr>
        <td colspan="4">
           Price
        </td>

        <td colspan='2' style="text-align: right">
            Value
        </td>
        <td style="padding-left:10px" colspan='2' >
            Currency
        </td> 
    </tr>
 <tr>
    <td colspan="4"></td>
    <td colspan="2" style="text-align: right">Price 1</td>
    <td colspan="2" class="pull-right">Currency 1</td>
 </tr>   
 </table>

Working Fiddle

PS：您不需要使用PHP echo

打印这些静态文本

更改自：

<td colspan="4">
  <?php echo 'Price';?>:
</td>

要

<td colspan="4"> Price: </td>

Answer 3

不需要在这张桌子上强制使用colspans，看起来它可以简单地用每个三个td来完成

以下是我重建表格的方法：

<table>
    <tr>
        <td>First column</td>
        <td>Second column</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="empty">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><?php echo 'Price';?>:</td>
        <td style="text-align: right;"><?php echo 'Value';?></td>
        <td style="padding-left:10px;"><?php echo 'Currency';?></td>
    </tr>
    <tr>
        <td style="height:10px;">Some Text</td>
        <td style="text-align: right;"><?php echo $price; ?></td>
        <td style="padding-left:10px;"><?php echo $currency; ?></td>
    </tr>
</table>

Answer 4

要实现我认为你的意思，请考虑以下代码：

<table>
    <tr>
        <td colspan="4">First Column</td>
        <td colspan="4">Second Column</td>
    </tr>
    <tr>
        <td rowspan="3" colspan="4" style="vertical-align:top;">Some Text</td>
        <td>Value</td><td colspan="3">Currency</td>
    </tr>
    <tr>
        <td>100</td>
        <td colspan="3">USD</td>
    </tr>
    <tr>
        <td>3000</td>
        <td colspan="3">USD</td>
    </tr>
</table>

但我在第一和第二列的colspan="4"中看不到任何感觉。如果您删除了所有colspan属性，只需将colspan="2"添加到＆＃34;第二列＆＃34;它看起来会一样，而且不那么复杂。

如何在表中定位一些列

4 个答案: