CSS「word-break : break-all;」が効いていない…？

Question

###前提・実現したいこと
※テーブルタグの<td>の中の文字が横幅に合わせて改行されないため、横に並んだ<td>の文字が被ってしまう。
→CSS「word-break : break-all;」が効いていない…？

商品	単位	価格	画像
くつ・衣類など	kg	50円	商品画像
商品名	個	300円	商品画像

↑この表だと「くつ・衣類など」とその横の「kg」がスマホでみたときや、PCでブラウザの横幅を縮めたときに被ってします。

bootstrap3、wordpressを使って作ったサイトに、
JTRT RESPONSIVE TABLES　というプラグインをインストールして作成した表があり、デバイスに合わせてその表中の項目の大きさが均一に縮小・拡大されるようにJTRT RESPONSIVE TABLESのCSSファイルに「table-layout: fixed;」を追加しました。

そのままだと画面幅が縮まったときに
※文字が横幅に合わせて改行されないため、横に並んだ項目同士が被るので、さらに同じCSSファイルに「word-break : break-all;」、「word-wrap:break-word;」を追記しました。

###発生している問題・エラーメッセージ

しかし画面幅を狭めても<td>で囲まれた文字が改行されず、

　※文字が横幅に合わせて改行されないため、横に並んだ項目同士が被る

のが直りません。

###該当のソースコード

  .jtTableContainer table{
     border-collapse: collapse;
     border: none;
	    word-break : break-all;
 }

  .jtTableContainer table tr th, .jtTableContainer table tr td{
     border: none;
	   word-break : break-all;
 }

  .jtTableContainer table td{
          word-break : break-all;
	      width:30%;
 }

  .jtTableContainer table tr{
     border: none;   
 }

   .jtrespo-scroll table tr td, .jtrespo-scroll table tr th{
     border: none;   
     white-space: nowrap;
 }

 table tr td.htRight, table tr th.htRight{
     text-align: right;
 }

 table tr td.htCenter, table tr th.htCenter{
     text-align: center;
 }

 table tr td.htLeft,table tr th.htLeft{
     text-align: left;
	 word-break : break-all;
 }

 table tr td.htJustify,table tr th.htJustify{
     text-align: justify;
 }

 table tr td.border-bottom,table tr th.border-bottom{
     border-bottom:solid 1px #ccc;
 }
 table tr td.border-top,table tr th.border-top{
     border-top:solid 1px #ccc;
 }
 table tr td.border-right,table tr th.border-right{
     border-right:solid 1px #ccc;
 }
 table tr td.border-left,table tr th.border-left{
     border-left:solid 1px #ccc;
 }

 .jtrespo-stack{
     overflow-x:hidden;
	   word-break : break-all;
 }

 .jtrespo-stack table{
	   word-break : break-all;
     table-layout: fixed;
     width:30%;
 }

 .jtrespo-stack table.stackMeNowJT thead{
     display: none;
	 	  word-break : break-all;
	  width:1
 }

 .jtrespo-stack .stackedheadtitlejt{
     display:none;
	 	  word-break : break-all;
	  width:1
 }

  .jtrespo-stack table.stackMeNowJT .stackedheadtitlejt{
      display: inline-block;
	  word-break : break-all;
	  width:100%;
  }

.jtrespo-stack table.stackMeNowJT tr,
.jtrespo-stack table.stackMeNowJT th,
.jtrespo-stack table.stackMeNowJT td {
	display: block;
	word-break : break-all;
	width:30%;}

.jtrespo-stack table.stackMeNowJT tr{
    margin-bottom: 24px;
    padding: 8px;
    background: #fbfafa;
    border: solid 1px #ccc;
    box-shadow: 0px 0px 4px #ccc;
	word-break : break-all;
}
.jtrespo-stack table.stackMeNowJT td {
	border-top: none;
    margin-bottom: 4px;
	word-break : break-all;
		width:30%;
}
.jtrespo-stack table.stackMeNowJT tr td:first-child {
	font-weight: bold;
	width:30%;
}

.dataTables_length{
    float: none!important;
    margin-bottom: 8px;
    display: block;
}

.dataTables_paginate{
    float: none!important;
    text-align: left!important;
    margin: 14px 0;
}

<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">価格表<i class="fa fa-sort-desc"></i><img src="" alt="価格表" width="350" height="44" class="right size-full wp-image-1228" /></a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body"><div class='jtrt_table_MotherShipContainer'><div class='jtTableContainer jtrespo-scroll  '   ><div class='jtsettingcontainer' style='display:none;position:absolute;left:-9999px;'><table id='jtrt_table_2260' data-sorting='false' data-paging='false' data-paging-size='10'  data-filtering='false' data-jtrt-table-id='2260' class='jtrt-table' ><thead><tr><th>衣類・バック・装飾品</th><th>単位</th><th>買取単価</th><th>画像</th></tr></thead><tbody><tr><td>スニーカー（セット）</td><td>kg</td><td><span class="satei">80円</span></td><td><img src="http://（ここはサイトURLが入っています）/wp/wp-content/uploads/2015/05/shoes02.png" class="res center" alt="買取価格スニーカーセット" width="100px"></td></tr><tr><td>靴（セット）※ブーツ不可</td><td>kg</td><td><span class="satei">50円</span></td><td><img src="http://（ここはサイトURLが入っています）/wp/wp-content/uploads/2015/05/shoes08.png" class="res center" alt="買取価格靴セット" width="100px"></td></tr><tr><td>帽子</td><td>kg</td><td><span class="satei">100円</span></td><td><img src="http://（ここはサイトURLが入っています）/wp/wp-content/uploads/2015/05/itemph05.png" class="res center" alt="帽子の買取価格" width="100px"></td></tr><tr><td>バック</td><td>kg</td><td><span class="satei">100円</span></td><td><img src="http://（ここはサイトURLが入っています）/wp/wp-content/uploads/2015/05/itemph02.png" class="res center" alt="バックの買取価格" width="100px"></td></tr><tr><td>アクセサリー・貴金属・<br />腕時計・眼鏡</td><td>kg</td><td><span class="satei">500円</span></td><td><img src="http://（ここはサイトURLが入っています）/wp/wp-content/uploads/2015/05/itemph07.png" class="res center" alt="アクセサリ・貴金属・腕時計・眼鏡の買取価格" width="100px"></td></tr><tr><td>香水(残量50％以上)　上</td><td>kg</td><td><span class="satei">1500円</span></td><td><img src="http://（ここはサイトURLが入っています）/wp/wp-content/uploads/2015/05/itemph09.png" class="res center" alt="香水の買取価格" width="100px"></td></tr><tr><td>香水(残量50％以上)　下</td><td>kg</td><td><span class="satei">750円</span></td><td><img src="http://（ここはサイトURLが入っています）/wp/wp-content/uploads/2015/05/itemph09.png" class="res center" alt="香水の買取価格" width="100px"></td></tr></tbody></table></div></div><br />
					<a href="">買取に関する詳細</a>
</div></p></div></p></div>

###試したこと
※１．bodyやcontainerに「word-break : break-all;」、「word-wrap:break-word;」を付けてみても変わりませんでした。
※２． display: inline-block;が効いていると、横幅を指定しないと効かないという記事を見つけたので、width:100%;を
tableとtdに追加しましたが駄目でした。
※３「word-break : break-all;」、「word-wrap:break-word;」に!inportantを付け加えましたが、それもダメでした。
※４bootstrap.cssにも※１～３を試しましたが、ダメでした。。

###補足情報(言語/FW/ツール等のバージョンなど)
・WordPress 4.8.4
・プラグインJTRT Responsive Tables（https://wordpress.org/plugins/jtrt-responsive-tables/）
・Bootstrap 3.2.0

わかりにくい説明で申し訳ありませんが、解決方法をご存知の方がいらっしゃいましたら教えていただけるとありがたいです。
よろしくお願いいたします。

Answer 1

そもそもwhite-space: nowrap;があって折り返さないようになっています。

.jtrespo-scroll table tr td, .jtrespo-scroll table tr th {
    border: none;   
    /*white-space: nowrap;*/
}

Comments

[kxmori]

x_x 様

ありがとうございます！！！
教えていただいたやり方で解決しました！

この度は本当にありがとうございました。