ワードプレスでテーブルコードを書いていますが、罫線(枠線)の上線部分だけが表示されません。

タイトルの通りにテーブル(表)を作成しているのですが、罫線の上部ラインだけが太線にならずに細線の状態です。
色々いじってみたのですが、どうしても解決出来ません。
コードで間違えている場所も見当たらないので、もし分かる方がいらっしゃいましたら宜しく御願いします。

html
1<table style="height: 312px; width: 727px; border-collapse: collapse; background-color: #fcfcfc;" border="2">
2<tbody>
3<tr style="height: 30px;">
4<td style="width: 21.8029%; height: 30px;"></td>
5<td style="width: 41.3369%; height: 30px;"></td>
6</tr>
7<tr style="height: 30px;">
8<td style="width: 21.8029%; height: 30px;"></td>
9<td style="width: 41.3369%; height: 30px;"></td>
10</tr>
11<tr style="height: 30px;">
12<td style="width: 21.8029%; height: 30px;"></td>
13<td style="width: 41.3369%; height: 30px;"></td>
14</tr>
15<tr style="height: 30px;">
16<td style="width: 21.8029%; height: 30px;"></td>
17<td style="width: 41.3369%; height: 30px;"></td>
18</tr>
19<tr style="height: 30px;">
20<td style="width: 21.8029%; height: 30px;"></td>
21<td style="width: 41.3369%; height: 30px;"></td>
22</tr>
23<tr style="height: 30px;">
24<td style="width: 21.8029%; height: 30px;"></td>
25<td style="width: 41.3369%; height: 30px;"></td>
26</tr>
27</tbody>
28</table>
29
30(style追加後)
31 
32<style>
33table {
34  border: 1px solid #000;　
35}
36th,
37td {
38  border: 1px solid #000;
39}
40</style>
41
42<table style="height: 312px; width: 727px; border-collapse: collapse; background-color: #fcfcfc;">
43<tbody>
44<tr style="height: 30px;">
45<td style="width: 21.8029%; height: 30px;"></td>
46<td style="width: 41.3369%; height: 30px;"></td>
47</tr>
48<tr style="height: 30px;">
49<td style="width: 21.8029%; height: 30px;"></td>
50<td style="width: 41.3369%; height: 30px;"></td>
51</tr>
52<tr style="height: 30px;">
53<td style="width: 21.8029%; height: 30px;"></td>
54<td style="width: 41.3369%; height: 30px;"></td>
55</tr>
56<tr style="height: 30px;">
57<td style="width: 21.8029%; height: 30px;"></td>
58<td style="width: 41.3369%; height: 30px;"></td>
59</tr>
60<tr style="height: 30px;">
61<td style="width: 21.8029%; height: 30px;"></td>
62<td style="width: 41.3369%; height: 30px;"></td>
63</tr>
64<tr style="height: 30px;">
65<td style="width: 21.8029%; height: 30px;"></td>
66<td style="width: 41.3369%; height: 30px;"></td>
67</tr>
68</tbody>
69</table>
70&nbsp;

行動規範の内容に同意します

回答1件

まずborder="2"は削除して、

html
1<table style="height: 312px; width: 727px; border-collapse: collapse; background-color: #fcfcfc;">

以下のようにCSSを追加したほうが制御しやすいと思います。.cssファイルがあるなら、<style>と</style>を削除してください。

<style>
table {
  border: 1px solid #000;　/* 1pxの部分が線の太さです */
}
th,
td {
  border: 1px solid #000;　/* 1pxの部分が線の太さです */
}
</style>

投稿2020/05/24 13:00

編集2020/05/24 13:01

new1ro

総合スコア4528

Fantasista10

2020/05/24 17:42

回答ありがとうございます。記載していただいたようにコードを追加したのですが、今度は表の下線部分の線が消えてしまいました。これってどんな不具合が起こっているのでしょうか？

new1ro

2020/05/25 01:08

ブラウザの「拡大/縮小」をしていたりしませんか? 縮小表示になってしまっている場合、線が消えることもあります。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ワードプレスでテーブルコードを書いていますが、罫線(枠線)の上線部分だけが表示されません。

関連した質問