htmlテーブル横幅が調整できない

Question

htmlテーブル横幅が調整できません。
laravelを利用しているので、Bootstrapだと思います。

(1)テーブルにクラスでcssを以下を描いてみたりしました。

    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
や
    word-wrap: break-word;
や
  word-break : break-all;

を描いてクラスで指定してもダメでした。Chromeで見る感じではクラス名は入っている感じでした。

HTMLでクラスに指定したり、styleで調整しようとしていますがうまくいきません。

<table class="table table-striped return-table-responsive">
<th class="col-md-2" style="width:20%;">非稼働日</th>

<td style="word-wrap:break-word; width:20%;">0101,0108,0212,0321,0429,0430,0503,0504,0505,0716,0811,0917,0924,1008,1103,1123,1223</td>

ご教授をお願いします。

よろしくお願いします。

Answer 1

多分同じご質問だと思います。

bootstrapを使用しています、table内のtd要素の長文を画面サイズに合わせて改行させたいのですが方法がわかりません
https://teratail.com/questions/68647

Answer 2

私は以下の方法で解決しました。

<table style="table-layout:fixed;">
<th class="col-md-4">非稼働日</th>
<td style="word-wrap:break-word;">0101,0108,0212,0321,0429,0430,0503,0504,0505,0716,0811,0917,0924,1008,1103,1123,1223</td>

スタイルはHTMLに直接記載せずに、スタイルシートで変更した方が良いので適宜修正してください。