Govind Rai Govind Rai - 1 month ago 13
CSS Question

Tables with identical styles have different widths

I am trying to style two tables similarly. However, the column widths are different between the two tables even though the styles are the same. There seems to be invisible padding or spacing in the second table's first column.



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

You may need to add this:

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

References:

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>

Comments