tableの線が移動しない

tableをcenterに動かしたかったのでfloat: center;をcssに追加したら、tableの線が移動しなく変なことになっています。

index.htmlに

<table border=1 class="testtable">
 <tr><th></th><th>列-A</th><th>列-B</th></tr>
 <tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
 <tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
 <tr><td>行-3</td><td>A-3</td><td>B-3</td></tr>
</table>

と書きました。
cssに

.testtable{
  float: center;
  display:inline-block;
  padding-left:100px;
}

と書きました。

border-collapse:100px;

を付け加えたり、

border-collapse:none;

を付け加えたりしたのですが、
線が残ってしまいます。この線はborder-collapseでは消せないのでしょうか？
どのように描けば、この線も移動するのでしょうか？

m.ts10806

2017/10/03 00:53

結局どのように解決されたのでしょうか？→ https://teratail.com/help/question-tips#questionTips4-2

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

回答2件

ベストアンサー

float属性にセンター揃えする機能はありません。
ブロック要素のセンター揃えは左右マージンをautoにします。

html
1<html lang="ja">
2  <head>
3    <meta charset="utf-8">
4    <style>
5.testtable{
6  margin-left: auto;
7  margin-right: auto;
8}
9    </style>
10  </head>
11
12
13  <body>
14
15    <table border=1 class="testtable">
16      <tr><th></th><th>列-A</th><th>列-B</th></tr>
17      <tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
18      <tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
19      <tr><td>行-3</td><td>A-3</td><td>B-3</td></tr>
20    </table>
21
22  </body>
23</html>
24

投稿2017/10/02 23:35

編集2017/10/02 23:37

takna

総合スコア784

floatにcenterはありませんよ。

float

原因は別のところにあるはずです。

border-collapse

collapseですね。
あくまで線の表示の仕方の指定なのでサイズなどは効果がありません。
padding-left:100px;も関係しているかもしれませんのでcollapseを指定した上で意図通りになるかどうか調整してみてください。

追記：
というか、cssきちんとあてたいのであればborder=1という指定は邪魔になると思います。
その辺りは少し調べれば幾らでもやり方は出てくるので、まずは調べて色々やってみる癖をつけた方が良いです。
調べて出てこないのであれば大抵は調べ方が良くないです。
cssであれば私が提示したスタイルシートリファレンスにほとんど載っています。

投稿2017/10/02 23:12

編集2017/10/02 23:31

m.ts10806

総合スコア80850