在<code> element in a table

Question

I have some fixed-width content I would like to put in a table header cell with a little bubble around it to distinguish from non-fixed-width text.

The example below looks great except the bubble bottom covers up the cell border.

I would like to fix by moving the text up by 1, can't seem to figure it out; in effect, I think I want the baseline of the code.literal text to be 1-2px higher than the normal <th> baseline.

Is there a way to do this?

code.literal {
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 1px 3px;
    font-weight: normal;
    font-family: Consolas,Menlo,"Liberation Mono",Courier,monospace;
}

th, td {
    font-family: Arial, sans-serif;
}
.small {
    font-size: 75%;
}

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
  padding-bottom: 0;
  padding-top: 0;
}

<table>
<tr><th>Aluminum <code class="literal small">foo.bar.baz.quux</code></th>
    <th>Barium <code class="literal small">jabberwocky</code></th>
</tr>
<tr><td>1</td><td>2</td></tr>
</table>

Answer 1

If you add a display: inline-block; to your code.literal, the table will contain the element as a block level item instead. Which I think is what you are going for here.

code.literal {
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 1px 3px;
    font-weight: normal;
    font-family: Consolas,Menlo,"Liberation Mono",Courier,monospace;
    display: inline-block;
}

th, td {
    font-family: Arial, sans-serif;
}
.small {
    font-size: 75%;
}

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
  padding-bottom: 0;
  padding-top: 0;
}

<table>
<tr><th>Aluminum <code class="literal small">foo.bar.baz.quux</code></th>
    <th>Barium <code class="literal small">jabberwocky</code></th>
</tr>
<tr><td>1</td><td>2</td></tr>
</table>