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

Question

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

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%;
}
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>

Answer 1

您可能需要添加：

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

参考文献：

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>

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

Tables with identical styles have different widths

html

css

html-table

css-tables