HTML如何使表格自动展开到窗口_Html_Html Table

HTML如何使表格自动展开到窗口

html

HTML如何使表格自动展开到窗口,html,html-table,Html,Html Table,我对创建html表还不熟悉，我从各种资源中获取了以下信息，列出了一些测试传感器的信息我正在努力做的是让整个表格自动展开，以填充到用户浏览器窗口的大小。目前它是一个固定宽度要允许两列展开/调整，必须向标题中添加哪些内容我目前的代码如下 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, ma

我对创建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>

在类中或直接在表标记中指定宽度。您还可以在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>

这将起到必要的作用：

工作台宽度=100%？使用

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