はてなブログのテーブル（表）を中央に持ってきたい。

はてなブログの表なんですが、中央に寄せたいのに寄りません。
URL:https://www.menbouyuzu.net/entry/Vipera
対象ブラウザは、クロームでバージョン77です。

HTML
1<p>まず、ザ・ヴァイパー、グループとしてのプロフィールを見てみましょう。</p>
2<center>
3<table>
4<thead>
5<tr>
6<th colspan="2">Vipera（ヴァイパー）</th>
7</tr>
8</thead>
9<tbody>
10<tr>
11<th rowspan="4">メンバー</th>
12<td>YUYA</td>
13</tr>
14<tr>
15<td>JIN</td>
16</tr>
17<tr>
18<td>HARUTSUKI</td>
19</tr>
20<tr>
21<td>ICHIRU</td>
22</tr>
23<tr>
24<th>スペシャルメンバー</th>
25<td>MIRAI</td>
26</tr>
27<tr>
28<th>メジャーデビュー</th>
29<td>２０１７年</td>
30</tr>
31<tr>
32<th>所属</th>
33<td>日本クラウン</td>
34</tr>
35<tr>
36<th>賞</th>
37<td>平成29年度クラウンヒット賞「新人賞」</td>
38</tr>
39<tr>
40<th>備考</th>
41<td>男装をした女性である</td>
42</tr>
43</tbody>
44</table>
45</center>
46

とやるのですができません。

良く分からず、CSSなども設定しましたので、リセットがかかっているのかもしれません。

CSS
1/* <system section="theme" selected="17680117126967939259"> */
2@import url("https://blog.hatena.ne.jp/-/theme/17680117126967939259.css");
3/* </system> */
4
5/* 日付タグの色 */
6.entry-header .date a {
7    color: #000;
8    background:#FFEB3B;
9}
10/* ヘッダー背景の色 */
11#blog-title{
12background:#00BCD4;
13}
14/* ヘッダーテキストの色 */
15#title a {
16    color: #FFEB3B;
17}
18/* サイドメニューの色 */
19.hatena-module-title {
20    border-bottom: 1px solid #00BCD4;
21}
22.hatena-module-title:before {
23    border-top: 6px solid  #00BCD4;
24}
25/* シェアボタンの色 */
26.si-share-count {
27color:#fff;
28}
29a.hatena-bookmark-buttom{
30background-color:#00A4DE;
31}
32.blogicon-bookmark:before{
33color:#fff;
34}
35.si-share-item a{
36background-color:#00A4DE;
37}
38a.fb{
39background-color:#4267B2;
40}
41.fa-facebook-square:before{
42color:#fff;
43}
44a.tw{
45background-color:#28A9E0;
46}
47.fa-twitter:before{
48color:#fff;
49}
50a.po{
51background-color:#F13D58;
52}
53.fa-get-pocket:before{
54color:#fff;
55}
56.si-share-item a:hover{
57background-color:#2cc8ff;
58}
59a.fb:hover{
60background-color:#7591cc;
61}
62a.tw:hover{
63background-color:#6bc4ea;
64}
65a.po:hover{
66background-color:#f68495;
67}
68/* 文字の大きさ */
69body{
70font-size:17px;
71}
72/* ヘッダーサイズ調整 */
73.header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner{
74	background-size:auto;
75	background-position:0 0;
76	padding-top:188px;
77}
78
79/* BOX（黄色）*/
80.box {
81    position: relative;
82    margin: 2em 0;
83    padding: 0.5em 1em;
84    border: solid 3px #ffa500;
85    border-radius: 0 8px 8px 8px;
86}
87.box .box-title {
88    position: absolute;
89    display: inline-block;
90    top: -27px;
91    left: -3px;
92    padding: 0 9px;
93    height: 25px;
94    line-height: 25px;
95    vertical-align: middle;
96    font-size: 17px;
97    background: #ffa500;
98    color: #ffffff;
99    font-weight: bold;
100    border-radius: 5px 5px 0 0;
101}
102.box p {
103    margin: 0;
104    padding: 0;
105}
106
107.box ul li {
108  line-height: 1.5;
109  padding: 0.5em 10px;
110  list-style-type: none!important;
111}
112
113.box ul li:before {/*疑似要素*/
114  font-family: "FontAwesome";
115  content: "\f138";/*アイコンの種類*/
116  position: absolute;
117  left : 2em;/*左端からのアイコンまでの距離*/
118  color: #ffa500;/*アイコン色*/
119}
120/* BOX2（青色）*/
121.box2 {
122    position: relative;
123    margin: 2em 0;
124    padding: 0.5em 1em;
125    border: solid 3px #40e0d0;
126    border-radius: 0 8px 8px 8px;
127}
128.box2 .box2-title {
129    position: absolute;
130    display: inline-block;
131    top: -27px;
132    left: -3px;
133    padding: 0 9px;
134    height: 25px;
135    line-height: 25px;
136    vertical-align: middle;
137    font-size: 17px;
138    background: #40e0d0;
139    color: #ffffff;
140    font-weight: bold;
141    border-radius: 5px 5px 0 0;
142}
143.box2 p {
144    margin: 0;
145    padding: 0;
146}
147
148.box2 ul li {
149  line-height: 1.5;
150  padding: 0.5em 10px;
151  list-style-type: none!important;
152}
153
154.box2 ul li:before {/*疑似要素*/
155  font-family: "FontAwesome";
156  content: "\f138";/*アイコンの種類*/
157  position: absolute;
158  left : 2em;/*左端からのアイコンまでの距離*/
159  color: #40e0d0;/*アイコン色*/
160}
161
162.box15 {
163    padding: 0.2em 0.5em;
164    margin: 2em 0;
165    color: #565656;
166    background: #ffeaea;
167    box-shadow: 0px 0px 0px 10px #ffeaea;
168    border: dashed 2px #ffc3c3;
169    border-radius: 8px;
170}
171.box15 p {
172    margin: 0; 
173    padding: 0;
174}
175
176/*写真を中央に表示*/
177.hatena-fotolife, .http-image {
178display: block;
179margin: 0px auto;
180}
181
182/* 2018-10-22*/
183<!-- メニューバー -->
184#menubar{
185width:100%; 
186}
187
188#menubar ul{
189display:table;
190width:100%;
191margin: 20; 
192padding: 0;
193background-color: #FFFFFF; }
194#menubar li{
195display: table-cell;
196width:20%;
197padding:0;
198background-color: #203556; }
199#menubar li a{
200display: block;
201margin:0 auto;
202padding:5px;
203border: 1px solid #FFFFFF;
204text-decoration: none;
205color: #FFFFFF;
206text-align: center;
207font-size: 18px; }
208#menubar li a:hover{
209background-color: #406BAC; }
210
211/* 2018-10-22*/
212
213
214/* 見出しのリセット */
215.entry-content h3,
216.entry-content h3::before,
217.entry-content h3::after {
218background: none;
219border: none;
220border-radius: 0;
221} 
222
223.entry-content h3 {
224padding: 12px;
225color: #333;
226border-left: 4px solid;
227border-bottom: 1px solid;
228border-color: #4169e1;
229background-color: #b0c4de;
230}
231
232.table-of-contents{
233padding: 20px 10px 20px 40px;
234border-radius: 5px;
235background: #ccffcc;
236}
237
238.table-of-contents {
239    padding: 15px 10px 15px 35px;  /* 枠内の余白（上右下左） */
240    font-size: 100%;  /* 文字サイズ */
241    border:solid 2px #7DB4EC;  /* 線の種類と色 */
242    background:#f0ffff;  /* 背景 */
243    border-radius:8px;/* 数字が大きいほど丸くなる */
244}
245
246

分かる方、どうか教えて下さい。

m.ts10806

2019/10/25 05:24

対象のブラウザをご提示ください。またcenterタグ自体は既に削除されている機能かと思います(ブラウザが対応してくれてるかもしれませんが推奨されません)

m.ts10806

2019/10/25 05:24

HTMLも再現可能な、なるべく全体わかるようにコード提示ください

menbou14

2019/10/25 05:47

分かりました。修正しました。ありがとうございます！

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

回答1件

ベストアンサー

まずtable要素のdisplayをblockにしているところを外す。(display:table)でもいい。

css
1.entry-content table {
2    border-collapse: collapse;
3    border-spacing: 0;
4    border-bottom: 1em;
5    margin-bottom: 1em;
6    width: auto;
7    overflow: 100%;
8    /* display: block; */ //ここを消す
9    font-size: 12.8px;
10    font-size: .8rem;
11}

幅をコンテンツに応じた大きさ(display:block)の状態にしたいなら、widthを指定してあげる

css
1.entry-content table {
2    border-collapse: collapse;
3    border-spacing: 0;
4    border-bottom: 1em;
5    margin-bottom: 1em;
6    width: auto; // <- autoに変更
7    overflow: auto;
8    font-size: 12.8px;
9    font-size: .8rem;
10}

あと、YUYAさんのプロフィールテーブルの名前のところがYUKAになっています。ご報告までに

投稿2019/10/25 05:47

zushi0905

総合スコア683

menbou14

2019/10/25 05:57

お答え、ありがとうございます。でも、.entry-content table　なんてどこにもないんですが・・・。

menbou14

2019/10/25 05:57

あと、YUYAの間違い指摘してくれて、ありがとうございます！

zushi0905

2019/10/25 05:59

記載されているcssの一番上でimportしている17680117126967939259.cssの中に記載されていると思います。はてなブログの仕様はわかりませんが、こちらのcssは編集可能ですか？

menbou14

2019/10/25 06:15

分かりました！いじれないことはないのですが、17680117126967939259.cssがそうとう長すぎて、見た目的に今後わけが分からなくなりそうです。 .entry-content table　を上書きしてやるような方法はありませんか？お手数おかけして、本当にすみません。

zushi0905

2019/10/25 06:22 編集

minファイルしか見れない感じですかね。下のcssをimport文より後に記載してください。質問に記載されているcssの一番下に追加すればいいと思います。あとはwidthをautoと100%など適当に調整してください。 .entry-content table { border-collapse: collapse; border-spacing: 0; border-bottom: 1em; margin-bottom: 1em; width: 100%; overflow: 100%; display: table; font-size: 12.8px; font-size: .8rem; }

menbou14

2019/10/25 07:26

できました！ありがとうございます！本当にありがとうございました。

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