tableにスクロールを付けたの子要素の幅を変えたい

Question

テーブルに
overflow-x: auto; white-space: nowrap;
を付けて、横スクロールをしてます。その中の一つの<td>の横幅を変えたいのですが

<td>にクラスを付けても変わりません。。。 この場合横幅はかえられないのでしょうか？ ```ここに言語を入力 <table class="w-list"> <tr> <th align="center">NO.</th> <th align="center">ランク</th> <th align="center" class="w-list-come">氏名</th> <th align="center">あああ</th> <th align="center">あああ</th> <th align="center">あああ</th> <th align="center">あああ</th> <th align="center">あああ</th> <th align="center">あああ</th>

　　　　</tr>
<tr>
<td align="center">33</td>
<td align="center">333</td>
<td align="center" class="w-list-come">テスト太郎</td>
<td align="center">ああああああああああああああああああああ</td>
<td align="center">ああああああああああああああああああああ</td>
<td align="center">ああああああああああああああああああああ</td>
<td align="center">ああああああああああああああああああああ</td>
<td align="center">ああああああああああああああああああああ</td>
<td align="center">ああああああああああああああああああああ</td>
</tr>
</table>

```css
table.w-list{ 
  border-collapse:  collapse; 
       overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
}
.w-list th{
	background: linear-gradient(#f0dc006e, #fcff042e);
	border: solid 1px #CCC;
	padding: 10px;
	}
.w-list td {
    border: solid 1px #CCC;  /* 枠線指定 */
    padding: 10px;      /* 余白指定 */
}
td.w-list-come{
	width:300px;
	} 

Comments

[yambejp]

スクロールが適用されるようなサンプルをあげてください

[ayuayuayu]

すいません長めにしました！

Answer 1

table自体にscrollをつけていますが、tableをdivかなにかでラップしてそちらに
スクロールをつけてはだめですか？

.wrap{
  overflow-x: auto;
}

<div class="wrap">
<table>・・・</table>
</div>

追記

white-spaceとwidthが競合しているのは私も試してみてわかりました

• table要素のtdにwidthが効かない

という手もあるようですが今ひとつですよね

中身をdivか何かでラップして

<td align="center" class="w-list-come"><div>テスト太郎</div></td>

td.w-list-come div{
width:300px;
}
のようにするとかでしょうか。それでもpaddingやmarginを調整する必要があります

Comments

[ayuayuayu]

ありがとうございます。
やってみましたが、 class="w-list-come"の幅が変わりませんでした、、、

[ayuayuayu]

ありがとうございます。やってみたところ幅は変わったのですが、中身の文字量が多いと文字が横のtdにはみ出てしまいます、、、
なかなか難しいです、、(;_:)

[yambejp]

> 中身の文字量が多いと文字が横のtdにはみ出てしまいます

質問の意図が明確ではないのでアドバイスがぶれています。
divにスクロールをつけたり、カットしたりすればはみ出ることは無いと思いますが・・・

[ayuayuayu]

あ！！td.w-list-come div　にもスクロールをつけるってことですね！！
ありがとうございます。