CODEWITHSUNDEEP
htmlcsshtml-table
user2423959
user2423959

Reputation: 834

giving border for columns other than first column

I've a HTML code where i want the column border to be starting from second column. and my code is as below.

<table class="frame_PD-all">
  <tbody>
    <tr>
      <td class="align-left" valign="top">
        <div class="para">
          <span class="font-style-bold">B.1</span>
        </div>
      </td>
      <td colspan="9" align="center" valign="top">
        <div class="para">GENERAL COMMENCEMENT OF A CAUSE OR MATTER</div>
      </td>
    </tr>
    <tr>
      <td class="align-left" valign="top">
        <div class="para"></div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">1.</div>
      </td>
      <td colspan="5" align="left" valign="top">
        <div class="para">On sealing a writ for that commencement of an action or filling a counterclaim</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">400</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">00</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">
          <span class="font-style-italic">Praecipe</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align-left" valign="top">
        <div class="para"></div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">2.</div>
      </td>
      <td colspan="5" align="left" valign="top">
        <div class="para">On sealing an originating summons</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">160</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">00</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">
          <span class="font-style-italic">Praecipe</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align-left" valign="top">
        <div class="para"></div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">3.</div>
      </td>
      <td colspan="5" align="left" valign="top">
        <div class="para">On sealing a concurrent or renewed writ or a concurrent or renewed originating summons</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">20</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">00</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">
          <span class="font-style-italic">Praecipe</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align-left" valign="top">
        <div class="para"></div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">4.</div>
      </td>
      <td colspan="5" align="left" valign="top">
        <div class="para">On sealing an amended writ or an amended originating summons</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">20</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">00</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">
          <span class="font-style-italic">Praecipe</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="align-left" valign="top">
        <div class="para"></div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">5.</div>
      </td>
      <td colspan="5" align="left" valign="top">
        <div class="para">On sealing any other form of commencement of a cause or matter where no fee is specifically provided</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">160</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">00</div>
      </td>
      <td class="align-center" valign="top">
        <div class="para">
          <span class="font-style-italic">Praecipe</span>
        </div>
      </td>
    </tr>

  </tbody>
</table>

The fiddle is here.

How i can start the column border from second column. i.e. here in this case B1 should be out of the border.

Upvotes: 1

Views: 74

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115222

You can use :nth-child() pseudo selector for that 

table.frame_PD-all tr>td:nth-child(n+2){
    border:1px solid black;
}

FIDDLE

For more detail visit HERE

To avoid the space between cells you can use border-collapse property

table{
    border-collapse:collapse;
}

FIDDLE

Upvotes: 3

Andy
Andy

Reputation: 141

Have you tried using the :first-child selector?

table tr td {
    border: 1px solid left;
}
table tr td:first-child {
    border: none;
}

http://www.w3schools.com/cssref/sel_firstchild.asp

Upvotes: 0

Related Questions