具有相同样式的表格具有不同的宽度答案

【问题标题】：Tables with identical styles have different widths具有相同样式的表格具有不同的宽度
【发布时间】：2017-02-27 02:08:46
【问题描述】：

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

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>

【问题讨论】：

我认为这不适用于 table，因为您根本没有呈现表格数据。

标签： html css html-table css-tables

【解决方案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>

【讨论】：

谢谢，我不知道table-layout: fixed。但是，我不希望它们的宽度为 50%。我希望左列只占用文本的空间 + 两边的 15px 填充。
您可以调整宽度。检查参考。
是的，做到了！谢谢！