user agent stylesheetって何？

イシュー

  • bootstrap系のhtmlで、tbodyタグあたりにボーダーが入っていたのでこれを取りたい。
  • Google Chromeのディベロッパーツールを使うと、user agent stylesheetで「table{border-spacing: 2px; border-color: gray;}」がセットされている。
  • これってどやって設定されてるの？

参考

影響CSS

  • th:bootstrap.min.css:7
.table>thead>tr>th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
  • tbody: user agent stylesheet
    • (tbodyのcssが設定されていないため、UASが効いている）
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}

リセットCSS

  • 追加で以下のスタイルで上書きできればボーダー取れそう（9/10追記：取れない）
table {
  border-spacing: 0;
  border-color: transparent;
  border-collapse: collapse;
}

.table>thead>tr>th {
  border-bottom-width: 1px;
}

border-collapse