Question

I want to draw a table

  P
Q [A B]
  [C D]

where A, B, C, D are drawn with a border. Q and P are labels for the table and should not be drawn with a border. Q and P should be aligned with A.

How to achieve this? I can control which row to draw a border, but it won’t help because I can’t draw a border for the whole row.

Answer 1

td {
  border: 1px solid #999;
  padding: 10px;
}

td.no-border {
  border: 0;
}

tr.no-border td {
  border: 0;
}

<table>
  <tr class="no-border">
    <td></td>
    <td colspan="2">p</td>
  </tr>
  <tr>
    <td class="no-border">q</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td class="no-border"></td>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

I’ve created an ad hoc css class helper no-border, and applied it only to the cells I want to be borderless.