Question

我有一个HTML代码，我希望列边框从第二列开始。我的代码如下。

<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>

小提琴是 here 。

我如何从第二列开始列边框。即在这种情况下，B1应该在边界之外。

Answer 1

您可以使用:nth-child()伪选择器

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

FIDDLE

有关详细信息，请访问HERE

为避免单元格之间的空间，您可以使用border-collapse属性

table{
    border-collapse:collapse;
}

FIDDLE

Answer 2

您是否尝试过使用：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

为第一列以外的列提供边框

2 个答案: