Question

我有一张这样的表：

<div style="width:100px;">
<table>
    <tr>
        <td style="width:60px;"></td>
        <td style="width:60px;"></td>
        ......
    </tr>
</table>
</div>

当在网络上显示时，第二个td元素将自动移动到新行。我该如何防止这种事情发生？

Answer 1

使用下面的代码

  <div style="width:100px;">
    <table>
        <tr>
            <td style="width:50%;"></td>
            <td style="width:50%;"></td>
        </tr>
    </table>
    </div>

Answer 2

如果它是由php显示的，你可以计算td元素，然后调整每个元素的宽度，例如有两个变量：$number_of_td和$table_width，必须在之前指定。

<?php 
$number_of_td = 500;  //  for
$table_width = 10;    //  example
?>
<div style="width:<?php echo $table_width; ?>px;">
<table>
    <tr>

            <td style="width:<?php echo $table_width/$number_of_td; ?>px;"></td>
            <td style="width:<?php echo $table_width/$number_of_td; ?>px;"></td>

    </tr>
</table>
</div>

Answer 3

增加div宽度。

<div style="width:100px;">
<table>
    <tr>
        <td style="width:5%;"></td>
        <td style="width:5%;"></td>
        ......
    </tr>
</table>
</div>

如果有20 td，则根据需要进行相应分配。

Answer 4

我已将div宽度增加到“1000px”，以便您可以添加更多列，希望这有帮助，

 <div style="width:1000px;">
    <table>
        <tr>
            <td style="width:60px;"></td>
            <td style="width:60px;"></td>
        </tr>
    </table>
    </div>

HTML表格位置调整

4 个答案: