在html中创建其他表

时间:2019-07-11 17:23:01

标签: javascript html css

我想创建一个表,该表的行数很少,但列较大,第4列的右边界的厚度是其他边界的2倍。

示例:

|  |  |  |  ||  |  |  |  ||  |  |  |  ||  |  |  |  ||
|  |  |  |  ||  |  |  |  ||  |  |  |  ||  |  |  |  ||
|  |  |  |  ||  |  |  |  ||  |  |  |  ||  |  |  |  ||

||视为|的两倍宽度。

1 个答案:

答案 0 :(得分:2)

使用nth-child CSS选择器

td{ border-right:1px solid #ccc}

td:nth-child(4n){
  border-right-width:10px;
}
<table cellpadding=0 cellspacing=0>
<tr>
  <td>Col 1</td>
  <td>Col 2</td>
  <td>Col 3</td>
  <td>Col 4</td>
  <td>Col 5</td>
  <td>Col 6</td>
  <td>Col 7</td>
  <td>Col 8</td>
  <td>Col 9</td>

</tr>
<tr>
  <td>Col 1</td>
  <td>Col 2</td>
  <td>Col 3</td>
  <td>Col 4</td>
  <td>Col 5</td>
  <td>Col 6</td>
  <td>Col 7</td>
  <td>Col 8</td>
  <td>Col 9</td>

</tr>
<tr>
  <td>Col 1</td>
  <td>Col 2</td>
  <td>Col 3</td>
  <td>Col 4</td>
  <td>Col 5</td>
  <td>Col 6</td>
  <td>Col 7</td>
  <td>Col 8</td>
  <td>Col 9</td>

</tr>
</table>