如何使HTML表格大於默認頁面大小

我有一張用HTML和PHP（內容爲PHP）製作的表格，並且由於其中一個子節中的某些句子的長度我需要寬度去屏幕外（所以滾動的寬度和高度都一樣）。如何使HTML表格大於默認頁面大小

其中一列中的打印文本是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>

我試圖尋找它，但我只發現與表的默認可視屏幕外面發生的問題，但他們不希望它。我想表是它的全尺寸，即使屏幕擴展因此在寬度

來源

2016-07-11 Zoe

爲了使表格的寬度更大，你可以申請一些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

來源

2016-07-11 13:09:58 Justinas

用MySQL設置所有東西花了很長時間。我使用的是PHP 5.6，它會將很多問題升級到MySQLi。但謝謝你的答案 – Zoe

一個滾動條，你的問題：

如何讓我在上面的所有文本開始independantly的其他專欄？

您必須設置一個垂直對齊（vertical-align在CSS，或valign在HTML）：

<td valign="top">

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

來源

2016-07-11 13:05:37

-1

我如何做一個HTML表格更大比默認頁面大小

你可以給width超過100%

td {vertical-align: top;}

<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>

來源

2016-07-11 13:08:18 Rohit

我在完全相同的位置和方式首先完成了與寬度完全相同的事情。沒有改變。 – Zoe

如何使HTML表格大於默認頁面大小

回答

相關問題