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

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

ただいまの
回答率

87.49%

SP上で、縦に並べたtableを中央ぞろえにしたい

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 977

score 15

pc版では通常に表示されるtableをレスポンシブのため、縦に並べたいと思っています。
display:blockを使用して縦に配置することはできたのですが、width;100%;を指定しても長さが中途半端になり、また中央揃えにしようと思ってもうまくいきません。
何が問題でしょうか?

表のレイアウトは|列1|列2|だけの単純なものです。

<div id="date">
<table cellspacing="0" cellpadding="0" id="date01" align="center">
<tr>
<td height="41" valign="middle" class="left">内容</td>
<td valign="middle" class="right">内容</td>
</tr>
</table>
</div>

PC版

#date{
width:100%;
height:42px;
border:0;
padding:0;
margin:10px 23px 0 23px;
display:block;
position:relative;
clear:both;

}

tbody {
 width: 100%;
}

#date01{
width:100%;
height:42px;
border:0;
padding:0;
margin:0px;
display:block;
position:relative;
clear:both;
}

#date01 .left{
width: 50%;
border:0;
padding:0;
margin:0;
color:#ffffff;
font-weight:bold;
text-align:center;
line-height:14px;
vertical-align:middle;
background-color:rgb(77, 209, 242);
}

#date01 .right{
border: 1px solid #c0c0c0;  
padding:0;
margin:0;
text-align:center;
line-height:14px;
vertical-align:middle;
}

SP版

#date{
  width:100%;
}

#date01{
 margin-left:auto;
 margin-right:auto;
}

 #date01 .left{
  display:block;
  line-height: normal;
  width:100%;
}

 #date01 .right{
   display:block;
  line-height: normal;
  width:100%;
}

 td{
 height:40px;
 height:30px;

}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

table,trdisplaytable,table-rowだからですね。
下記でどうでしょう?

    table,thead,tfoot,tbody,tr,th,td {
        display: block;
    }


そもそも、tableで組む内容なのかは気になりますが。
内容によっては、flexにしてflex-directionで指定しても良いかと。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/31 20:51

    ありがとうございます!
    結局tableは使わず、flexで並びを変えました!
    一番早く回答いただいたので、ベストアンサーにさせていただきます。

    キャンセル

+1

長さが中途半端というのはどういう意味でしょうか?

とりあえず
.rightのborderの影響でサイズが合ってないですね
.leftに合わせるならば
.rightに

box-sizing: border-box;

を追記してください
要素の幅・高さにborderを含めます

.rightに合わせるならば
.leftに背景色と同じ色のborderを追加すると合います

border: 1px solid rgb(77, 209, 242);

中央揃えにならないというのは
tdがtableに対しての事でしたら、trとtbodyの影響です

display:block;

をそれぞれに追記して
tdのスタイルを変更して希望のデザインを作ってください

width: ○○px; // 希望の幅にしてください
margin: 0 auto;

どのような表組みデザインかが分からないので不確かですが、
tableの表組みを崩すのでしたら
もしかするとtableではなくdlやulに変更すると何かと楽になるかもしれません

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/31 20:50

    ありがとうございます!
    結局単純に<p>に背景を付けました。。。

    キャンセル

+1

現状で中央寄せであれば、以下のコードを削除してみてください。

PC版・SP版

#date{
  width:100%; /* ← 削除 */
}


PC版

#date01{
  width:100%;    /* ← 削除 */
  display:block; /* ← 削除 */
}

他の回答にもありますが、tableではなく、他のタグ(flexやdl・ul等)でHTMLから組み直すことを検討してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/31 20:49

    ありがとうございます!
    煮詰まっていて、table以外を使えばいいことに考えが及んでいませんでした。。

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る