Dawid Laszuk Dawid Laszuk -4 years ago 80
HTML Question

Line after first row and column in HTML table

How can one distinguish first row and left-most column in HTML table. Preferably with a line separating these from the rest columns/rows.

I found few partial solutions, but they all refer to updating CSS. Since I want to include this table in a wordpress blog (I think that) I don't have access to head and thus cannot include CSS style, neither there is an option to include any JavaScript script.

Table:



<table>
<tr>
<td></td> <td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1<td> </td><td>0.2</td><td>1.1</td>
</tr>
<tr>
<td>2</td> <td>0.5</td><td></td><td>-0.7</td>
</tr>
<tr>
<td>3</td> <td>0.3</td><td>0.9</td><td>0</td>
</tr>
</table>





Expected outcome:

enter image description here

Answer Source

You shall use:

  • for left column n-th child selector

    td:nth-child(n) {
    /* your stuff here */ }

  • for first row th tag

Example:

<table style="border-collapse:collapse; width: 100%">
  <tr style="border-bottom: 3px solid #000;background-color: #d3d3d3 !important;">
    <th  style="background-color: #d3d3d3 !important;border-right: 3px solid #000;padding: 8px;"></th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td style="background-color: #d3d3d3 !important;border-right: 3px solid #000;padding: 8px;">1</td>
    <td> </td>
    <td>0.2</td>
    <td>1.1</td>
  </tr>
  <tr style="background-color: #f5f5f5">
    <td style="background-color: #d3d3d3 !important;border-right: 3px solid #000;padding: 8px;">2</td>
    <td>0.5</td>
    <td></td>
    <td>-0.7</td>
  </tr>
  <tr>
    <td style="background-color: #d3d3d3 !important;border-right: 3px solid #000;padding: 8px;">3</td>
    <td>0.3</td>
    <td>0.9</td>
    <td>0</td>
  </tr>
</table>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download