table tr td:first-childが動かない

Question

いつもお世話になっております。

質問は表題の通りです。

htmlでtableを作成し、cssでthとtdにborder-bottomをつけることで、下線がついているようなデザインに見せています。

そして、一番初めのthとtdにはborder-topも付けたいので、下記コードのように記述したのですが、
なぜかthにはつくのですが、tdにはつきません。

#company table tr th:first-child,#company table tr td:first-childを複数指定で記述していますが、これを別々にしても動きませんでした。

他に必要情報がありましたら追記しますのでおっしゃってください。
宜しくお願いします。

<div id="company">
  <table>
  <tr>
  <th>
    <p>
    社名
    </p>
  </th>
  <td><p>
    sample</p></td>
</tr>
<tr>
  <th><p>会社設立</P></th>
  <td><p>
    sample
  </p></td>
</tr>
<tr>
  <th><p>東京本社</p></th>
  <td>
  <p>
    sample</p>
  <p>
  </td>
</tr>
</table>

#company table{
	width: 85%;
	margin: 0 auto;
	margin-top: 40px;
}

#company table tr th,#company table tr td{
	border-bottom: 1px solid rgb(213, 217, 227);
}

#company table tr th:first-child,#company table tr td:first-child{
	border-top: 1px solid rgb(213, 217, 227);
}

#company table tr th{
	vertical-align:top;
	padding-top: 20px;
	width: 100px;
}


#company table tr td{
	padding: 20px 0;
}

#company table p{
	font-size: 15px;
}

Answer 1

#company table tr:first-child th,
#company table tr:first-child td{
    border-top: 1px solid rgb(213, 217, 227);
}

こういうことでしょうか？

Comments

[kato00]

ありがとうございます！！教えて頂いたコードで見事に解決しました！！！

[Atsushi_Okumura]

どういたしまして！

Answer 2

:first-childは、その要素が見つかる最初の要素ではなく、タグに関わらず最初の要素のみで動作します。
#company table tr td:first-childは存在しないので、thに続くtdを取得したい場合は、#company table tr th:first-child + tdか
#company table tr td:nth-child（2）とするのがいいでしょう。

Comments

[kszk311]

余談ですが、最後の「<p>sample</p>」の後の「<p>」がいらないですね

[kato00]

なるほど！！first-childってそういうことだったんですね！
不備箇所のご指摘もありがとうございます！