Question

我是创建html表的新手，我已从各种资源中提取以创建以下内容以列出来自某些测试传感器的信息。

我正在努力做的是让全表自动扩展以填充用户浏览器窗口的大小。目前它是固定宽度。

必须添加到标题中以允许两列扩展/调整？

我目前的代码如下。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style type="text/css">
            body {font-family: monospace; font-size: 13px; white-space: pre-wrap;}
        </style>
    </head>
    <body>
         &lt;head&gt; &lt;meta http-equiv=&apos;refresh&apos; content=&apos;30&apos; /&gt; &lt;/head&gt;<br/>
         &lt;style&gt;.custom { font-size: 1em; font-family: Gill Sans Extrabold, sans-serif; padding:5px; border-collapse: collapse; border: 1px solid black; }
         &lt;/style&gt;
         &lt;table class=custom&gt;
         &lt;tr class=custom&gt;
         &lt;th class=custom&gt;Security Sensor
         &lt;/th&gt;
         &lt;th class=custom&gt;Last Tripped
         &lt;/th&gt;
         &lt;/tr&gt;<br/>
         &lt;tr class=custom&gt;
         &lt;td class=custom&gt;20. Living Room
         &lt;/td&gt;
         &lt;td class=custom&gt; 2018/04/09 - 11:47:52
         &lt;/td&gt;
         &lt;/tr&gt;<br/>
         &lt;tr class=custom&gt;
         &lt;td class=custom&gt;18. Hallway
         &lt;/td&gt;
         &lt;td class=custom&gt; 2018/04/09 - 11:47:17
         &lt;/td&gt;
         &lt;/tr&gt;<br/>
         &lt;tr class=custom&gt;
         &lt;td class=custom&gt;10. Kitchen
         &lt;/td&gt;
         &lt;td class=custom&gt; 2018/04/09 - 11:47:17
         &lt;/td&gt;
         &lt;/tr&gt;<br/>
         &lt;tr class=custom&gt;
         &lt;td class=custom&gt;Kitchen - Motion Sensor
         &lt;/td&gt;
         &lt;td class=custom&gt; 2018/04/09 - 11:39:41
         &lt;/td&gt;
         &lt;/tr&gt;<br/>
         &lt;tr class=custom&gt;
         &lt;td class=custom&gt;17. Entrance Hall
         &lt;/td&gt;
         &lt;td class=custom&gt; 2018/04/09 - 11:13:42
         &lt;/td&gt;
         &lt;/tr&gt;<br/>lt;tr class=custom&gt;
         &lt;td class=custom&gt;05. Ben&apos;s Room
         &lt;/td&gt;&lt;td class=custom&gt; 2018/04/09 - 11:13:26
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;tr class=custom&gt;
&lt;td class=custom&gt;02. Landing
&lt;/td&gt;
&lt;td class=custom&gt; 2018/04/09 - 11:13:22
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;tr class=custom&gt;
&lt;td class=custom&gt;03. Loft Landing
&lt;/td&gt;
&lt;td class=custom&gt; 2018/04/09 - 11:13:21
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;tr class=custom&gt;
&lt;td class=custom&gt;06. Loft Room
&lt;/td&gt;
&lt;td class=custom&gt; 2018/04/09 - 11:13:14
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;tr class=custom&gt;
&lt;td class=custom&gt;01. Front Door
&lt;/td&gt;
&lt;td class=custom&gt; 2018/04/09 - 10:38:47
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;tr class=custom&gt;
&lt;td class=custom&gt;08. Side Door
&lt;/td&gt;
&lt;td class=custom&gt; 2018/04/09 - 10:36:04
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;tr class=custom&gt;
&lt;td class=custom&gt;13. Conservatory
&lt;/td&gt;
&lt;td class=custom&gt; 2018/04/09 - 10:35:47
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;tr class=custom&gt;
&lt;td class=custom&gt;19. Front Room
&lt;/td&gt;
&lt;td class=custom&gt; 2018/04/09 - 10:35:15
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;tr class=custom&gt;
&lt;td class=custom&gt;12. Dining Room
&lt;/td&gt;
&lt;td class=custom&gt; 2018/04/09 - 10:34:36
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;tr class=custom&gt;
&lt;td class=custom&gt;07. Conservatory Door
&lt;/td&gt;
&lt;td class=custom&gt; 2018/04/09 - 10:32:13
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;tr class=custom&gt;
&lt;td class=custom&gt;04. Main Bedroom
&lt;/td&gt;
&lt;td class=custom&gt; 2018/04/09 - 10:23:57
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;tr class=custom&gt;
&lt;td class=custom&gt;09. Emma&apos;s Room&lt;/td&gt;
&lt;td class=custom&gt; 2018/04/09 - 09:31:53
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;tr class=custom&gt;
&lt;td class=custom&gt;14. Kitchen Door
&lt;/td&gt;
&lt;td class=custom&gt; 2018/04/08 - 16:21:20
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;tr class=custom&gt;
&lt;td class=custom&gt;11. Lean To&lt;/td&gt;
&lt;td class=custom&gt; 2017/12/16 - 12:20:04
&lt;/td&gt;
&lt;/tr&gt;<br/>
&lt;/table&gt;<br/>
   </body>
</html>

Answer 1

在类中或直接在表标记中给出宽度。您还可以在td标记中指定宽度，以便为表列提供宽度

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css">
      body {
        font-family: monospace;
        font-size: 13px; 
        white-space: pre-wrap;
      }
     .custom { font-size: 1em; font-family: Gill Sans Extrabold, sans-serif; padding:5px; border-collapse: collapse; border: 1px solid black; } table { width:100% } .th { width:50% }
    </style>
  </head>
  <body>
    <table class=custom>
      <tr class=custom>
        <th class=custom>Security Sensor</th>
        <th class=custom>Last Tripped</th>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>20. Living Room</td>
        <td class=custom> 2018/04/09 - 11:47:52</td>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>18. Hallway</td>
        <td class=custom> 2018/04/09 - 11:47:17</td>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>10. Kitchen</td>
        <td class=custom> 2018/04/09 - 11:47:17</td>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>Kitchen - Motion Sensor</td>
        <td class=custom> 2018/04/09 - 11:39:41</td>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>17. Entrance Hall</td>
        <td class=custom> 2018/04/09 - 11:13:42</td>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>05. Ben&apos;s Room</td>
        <td class=custom> 2018/04/09 - 11:13:26</td>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>02. Landing</td>
        <td class=custom> 2018/04/09 - 11:13:22</td>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>03. Loft Landing</td>
        <td class=custom> 2018/04/09 - 11:13:21</td>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>06. Loft Room</td>
        <td class=custom> 2018/04/09 - 11:13:14</td>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>01. Front Door</td>
        <td class=custom> 2018/04/09 - 10:38:47</td>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>08. Side Door</td>
        <td class=custom> 2018/04/09 - 10:36:04</td>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>13. Conservatory</td>
        <td class=custom> 2018/04/09 - 10:35:47</td>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>19. Front Room</td>
        <td class=custom> 2018/04/09 - 10:35:15</td>
      </tr>
      <br/>
      <tr class=custom>
        <td class=custom>12. Dining Room</td>
        <td class=custom> 2018/04/09 - 10:34:36</td>
      </tr>
      <br/>
   </table>
 </body>
</html>

Answer 2

这将是必要的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type='text/css'>
            table {
        border: thin solid black;
        width: auto;
        height: auto;
    }
        </style>
    </head>
    <body>
  <table>
      <tr>
          <td>
              The table only expands enough for the content inside of it.
          </td>
      </tr>
  </table>
    </body>
</html>

HTML如何使表自动扩展到窗口

2 个答案: