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

Question

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;
 
}

Answer 1

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

PC版・SP版

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

PC版

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

---

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

Comments

[yasu1110]

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

Answer 2

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

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

box-sizing: border-box;
```を追記してください
要素の幅・高さにborderを含めます

.rightに合わせるならば
.leftに背景色と同じ色のborderを追加すると合います
```css
border: 1px solid rgb(77, 209, 242);

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

display:block;
```をそれぞれに追記して
tdのスタイルを変更して希望のデザインを作ってください
```css
width: ○○px; // 希望の幅にしてください
margin: 0 auto;

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

Comments

[yasu1110]

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

Answer 3

table,trのdisplayがtable,table-rowだからですね。
下記でどうでしょう？

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

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

Comments

[yasu1110]

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