レスポンシブなtableを作るにあたって

質問

scssのコードです

@media(max-width:#{$bp}px){
table.break-at-#{$bp}{
display:block;width:100%;
tbody,thead{display:block;}
tr{
display:block;width:100%;
th,td{display:block;width:100%;box-sizing:border-box;}
}
}
}

こういうことするのはありですか？

ありだとして、これだとtdにwidth:100%が効いてくれません
どうすればtdもwidth:100%にできるのでしょう？

回答No.1

ORUKA1951

table自体が、リキッドですからレスポンシブにする必要はないと思います。

また、インデントさせるとわかるように
@media(max-width:#{$bp}px){
　　table.break-at-#{$bp}{
　　　　display:block;width:100%;
　　　　tbody,thead{display:block;
　　}
　　tr{
　　　　display:block;width:100%;
　　　　th,td{
　　　　　　　display:block;width:100%;
　　　　　　　box-sizing:border-box;
　　　　}
　　}
}
}
　あきらかにエラーになってます。
　⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )

もし、これがプレゼンテーションのために使用されているのではないtableでしたらそのまま。もしプレゼンテーション--整形のためのtableでしたら、tableを使うべきではないです。

補足

まずこれはscssのコードです、
scssのコードとしては不正ではないはずです
scssに関する説明は割愛します

$bpはbreakpointを表す変数です
やりたいことは画面幅が$bpで
指定した値以下になったとき
break-at-($bp)のクラスのtableを
一列にするということ
つまり本来横並びの同行のthとtdを
縦並びにしたいということです

知りたいことはtableを構成する要素の
displayをblockに変えてしまっても
問題ないかということ
そして実際表示上は問題が出ているが
これを解決する方法はないかということです