2019/07/13
以下のCSSを足すとイメージ通りになると思います。
.entry-content tr:not(:last-child) {
border-bottom: solid 1px #000;
}
@media only screen and (max-width:480px) {
.entry-content table tr:first-child th {
border-top: none;
}
.entry-content table th, .entry-content table td {
border: none;
}
}
ちなみに
.entry-content table *, .entry-content table *:before, .entry-content table *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}のあたりは不要だと思います。
よろしくお願いします。
2019/07/13
素早い回答ありがとうございます。
早速CSS追記と修正をしたところ、意図通りのデザインになりました！
不要とアドバイスいただいた記述も削除いたしました。
昨夜数時間悩んでいた事象で、解決してとてもとてもスッキリです。
心より感謝いたします、ありがとうございました！
2019/07/13
いえいえ！うまくいったようで良かったです！
WordPressテーマSANGOの質問
テーブルをCSSでカスタマイズした際、表の横中間線がカスタマイズ反映されない
いつもお世話になっております。
テーブルをテキストエディタでHTMLで記載し、子テーマで有効にしているporipuのCSSで装飾したいです。
HTML
th要素
td要素
th要素
td要素
th要素
td要素
CSS
.entry-content table *, .entry-content table *:before, .entry-content table *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.entry-content table {
width: 100%;
border-collapse: collapse;
border: 1px solid #000000;
}
.entry-content table th, .entry-content table td {
padding: 10px;
border: 1px solid #000000;
}
.entry-content table th {
width: 40%;
text-align: left;
background: #f7f0e9;
}
@media only screen and (max-width:480px) {
.entry-content table {
margin: 0;
}
.entry-content table th, .entry-content table td {
width: 100%;
display: block;
border-top: none;
}
.entry-content table tr:first-child th {
border-top: 1px solid #000000;
}
}
実際の表示は該当URLを見て頂けると分かるのですが、外枠と、thとtd隔てる真ん中の縦線は指定通りの1px #000000になるのですが、各行を隔てる横線がデフォルトの2pxグレーの線のままです。
全ての線を1px #000000にするにはどのように記述すれば良いでしょうか？
どうぞよろしくお願いいたします。