具有相同样式的表具有不同的宽度

Question

我正在尝试同样地设置两个表的样式。但是，即使样式相同，两个表之间的列宽也不同。在第二个表的第一列中似乎有隐形的填充或间距。

＆＃13;

＆＃13;

document.getElementById('displayDateTime').innerHTML = Date();

＆＃13;

html,
body {
  height: 100%;
}
body {
  margin: 0 auto;
  max-width: 960px;
  padding: 0 20px;
  font-family: 'Roboto', sans-serif;
}
h1 {
  font-size: 48px;
  margin-bottom: 5px;
}
h2 {
  font-size: 36px;
}
h3 {
  font-size: 24px;
  color: green;
}
table {
  width: 100%;
}
pre {
  font-family: 'Ubuntu Mono', monospace;
  padding: 20px;
  line-height: 1.5em;
}
.input {
  background-color: lightgrey;
}
.lineno {
  background-color: grey;
  padding-right: 15px;
}
.output {
  background-color: lightgrey;
  padding: 20px;
  line-height: 1.5em;
}

＆＃13;

<div class="code-block">
  <h2>Displaying Date &amp; Time</h2>

  <h3>Input</h3>
  <table>
    <tr>
      <td>
        <pre class="lineno">1<br>2<br>3</pre>
      </td>
      <td>
        <pre class="input">
&lt;script type="text/javascript"&gt;
   document.getElementById('displayDateTime').innerHTML = Date();
&lt;/script&gt;</pre>
      </td>
    </tr>
  </table>

  <h3>Output</h3>
  <table>
    <tr>
      <td>
        <pre class="lineno">&gt;</pre>
      </td>
      <td>
        <p id="displayDateTime" class="output"></p>
      </td>
    </tr>
  </table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可能需要添加以下内容：

table {
  width: 100%;
  table-layout: fixed;
}

参考文献：

• The table-layout property ~MDN

• 17.5.2 Table width algorithms: the table-layout property ~W3C

document.getElementById('displayDateTime').innerHTML = Date();

html,
body {
  height: 100%;
}
body {
  margin: 0 auto;
  max-width: 960px;
  padding: 0 20px;
  font-family: 'Roboto', sans-serif;
}
h1 {
  font-size: 48px;
  margin-bottom: 5px;
}
h2 {
  font-size: 36px;
}
h3 {
  font-size: 24px;
  color: green;
}
table {
  width: 100%;
  table-layout: fixed;
}
pre {
  font-family: 'Ubuntu Mono', monospace;
  padding: 20px;
  line-height: 1.5em;
}
.input {
  background-color: lightgrey;
}
.lineno {
  background-color: grey;
  padding-right: 15px;
}
.output {
  background-color: lightgrey;
  padding: 20px;
  line-height: 1.5em;
}

<div class="code-block">
  <h2>Displaying Date &amp; Time</h2>
  <h3>Input</h3>
  <table>
    <tr>
      <td>
        <pre class="lineno">1<br>2<br>3</pre>
      </td>
      <td>
        <pre class="input">
&lt;script type="text/javascript"&gt;
   document.getElementById('displayDateTime').innerHTML = Date();
&lt;/script&gt;</pre>
      </td>
    </tr>
  </table>
  <h3>Output</h3>
  <table>
    <tr>
      <td>
        <pre class="lineno">&gt;</pre>
      </td>
      <td>
        <p id="displayDateTime" class="output"></p>
      </td>
    </tr>
  </table>