Question

我有一个用HTML和PHP制作的表格（PHP用于内容），并且由于其中一个子部分中的一些句子的长度，我需要将宽度移到屏幕之外（因此滚动的宽度为以及身高）。

其中一列中的打印文本是Android应用程序的完整堆栈跟踪，由于列的长度较短，文本内部会被“挤压”。

如何将宽度表展开以离开屏幕，以便显示底部的滚动条？我也要添加另一列，所以我需要足够的空间。

此外，由于6列中的一列中的文本高度，其他内容将设置为列的中间。如何使所有文本从顶部开始独立于其他列？

重要代码：

<table border="1" style="border:2px solid black;">
    <thead>
        <tr>
            <td>time</td>
            <td>android_version</td>
            <td>device_id</td>
            <td>app_version</td>
            <td>stacktrace</td>
            <td>package</td>
        </tr>
    </thead>
    <tbody>
        <?php
            //etc database stuff
           while($row = mysql_fetch_assoc($result)) {
        ?>
            <tr>
                <td><?php echo $row['time'];?></td>
                <td ><?php echo $row['android_version'];?></td>
                <td ><?php echo $row['device_id'];?></td>
                <td ><?php echo $row['app_version'];?></td>
                <td ><?php echo $row['stacktrace'];?></td><!-- This is the part that is very long. The other text is centered based on the length of this. -->
                <td><?php echo $row['package'];?></td>
            </tr>
        <?php
        }
        ?>
    </tbody>
</table>

我尝试搜索它，但我只发现有关表格超出默认可见屏幕的问题，但他们不想要它。我希望桌子是它的全尺寸，即使屏幕展开，所以有一个宽度的滚动条

Answer 1

要使表格宽度更大，您可以为StackTrace列应用一些CSS。

如果您需要将其显示在一行中 - 请使用white-space: nowrap;
如果您只需要一些特定的宽度 - 请使用min-width: #px或width: #px;

要将所有元素与单元格顶部对齐vertical-align: top。

td {
  vertical-align: top;
}
td:nth-child(5) {
  /*white-space: nowrap;*/
  min-width: 500px;
}

<table border="1" style="border:2px solid black;">
  <thead>
    <tr>
      <td>time</td>
      <td>android_version</td>
      <td>device_id</td>
      <td>app_version</td>
      <td>stacktrace</td>
      <td>package</td>
    </tr>
  </thead>
  <tbody>

    <tr>

      <td>1975-01-01
        <br/>1975-01-01
        <br/>1975-01-01</td>
      <td>5.3</td>
      <td>9/11</td>
      <td>0.1.001</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec tortor vitae augue tempus egestas. Maecenas dictum dui vitae nisl tempus porta. Fusce ac nunc nec magna gravida sodales eget sed massa. Integer dapibus pulvinar tortor, ut ultrices
        nulla convallis vitae. Aenean egestas nunc sem, et efficitur est viverra at. Curabitur ipsum ante, commodo ac facilisis vitae, lobortis vitae felis. Curabitur dapibus faucibus erat, vitae consectetur est. Proin rutrum purus vel massa faucibus
        elementum. Vivamus venenatis a ante nec fringilla. Phasellus volutpat eu erat et placerat. Quisque diam felis, mollis vel auctor et, dapibus sed nisi. Maecenas vitae nisi leo. Proin aliquam malesuada nisl, sed imperdiet ligula porta non.</td>
      <td>Nop!</td>

    </tr>
  </tbody>
</table>

注意的

我发现您使用的是mysql_fetch_assoc - 请勿使用已弃用的功能！使用PDO或MySqli

Answer 2

问题：

如何使所有文本从其他列独立开始？

您必须在CSS中设置垂直对齐（vertical-align，或在HTML中设置valign）：

<td valign="top">

OR

<td style="vertical-align: top">

Answer 3

如何使HTML表格大于默认页面大小

您可以width超过100%

＆＃13;

td {vertical-align: top;}

＆＃13;

<body>
        <table border="1" style="border:2px solid black;width: 150%;">
            <thead>
                <tr>
                    <td>time</td>
                    <td>android_version</td>
                    <td>device_id</td>
                    <td>app_version</td>
                    <td>stacktrace</td>
                    <td>package</td>
                </tr>
            </thead>
            <tbody>
            <?php

                //etc database stuff

                while($row = mysql_fetch_assoc($result)) {
               ?>

                    <tr>

                        <td><?php echo $row['time'];?></td>
                        <td ><?php echo $row['android_version'];?></td>
                        <td ><?php echo $row['device_id'];?></td>
                        <td >some text</td>
                        <td >This is the part that is very long. The other text is centered based on the length of this.</td> 
                        <td ><?php echo $row['package'];?></td>

                    </tr>

                <?php
                }



                ?>
                </tbody>
            </table>

＆＃13;

如何使HTML表格大于默认页面大小

3 个答案: