テーブル内のセル同士が改行しない方法を教えてください

Question

.table {
	display: block;
	position: relative;
	overflow: scroll;
	width: calc(100%);
	height: calc(100vh);
	border-collapse: collapse;
	font-size: 0;
}

こんな感じで、セルが折り返さない様にはみ出したセル はスクロールできるようにしているのですが、
windowsのPCの方で確認するとはみ出したセルが改行されてしまいます。
（セル内の文章の折り返しではなく、セル自体の折り返しです）
編集を行っているPC(mac)ではセルは折り返さずきちんと表示されています。

理由と解決方法がわからないのでよろしくお願いします。

追記
正しく機能しているブラウザ：Safari Ver.11.1.2
問題が確認されたブラウザ：Internet Explorer Ver.11.0.70

長いですが、現状はこんな感じになってます。

HTML

<div id="users">
	<div class="example_table">
		<table>
			<thead>
			<tr>
				<th class="sort blank-no" data-sort="no">No.</th>
				<th class="sort blank-img" data-sort="img">イメージ</th>
				<th class="sort blank-name" data-sort="name">名前</th>
				<th class="sort a" data-sort="a">A</th>
				<th class="sort b" data-sort="b">B</th>
				<th class="sort c" data-sort="c">C</th>
				<th class="sort d" data-sort="d">D</th>
				<th class="sort e" data-sort="e">E</th>
				<th class="sort f" data-sort="f">F</th>
				<th class="sort g" data-sort="g">G</th>
				<th class="sort h" data-sort="h">H</th>
				<th class="sort i" data-sort="i">I</th>
				<th class="sort j" data-sort="j">J</th>
				<th class="sort k" data-sort="k">K</th>
			</tr>
			</thead>
			<tbody class="list">
			<tr>
				<th class="no">0</th>
				<th class="img"><p>-</p></th>
				<th class="name">バナナ</th>
				<td class="a">1</td>
				<td class="b">2</td>
				<td class="c">3</td>
				<td class="d">4</td>
				<td class="e">5</td>
				<td class="f">6</td>
				<td class="g">7</td>
				<td class="h">8</td>
				<td class="i">9</td>
				<td class="j">10</td>
				<td class="k">11</td>
			</tr>
			<tr>
				<th class="no">0</th>
				<th class="img"><p>-</p></th>
				<th class="name">りんご</th>
				<td class="a">1</td>
				<td class="b">2</td>
				<td class="c">3</td>
				<td class="d">4</td>
				<td class="e">5</td>
				<td class="f">6</td>
				<td class="g">7</td>
				<td class="h">8</td>
				<td class="i">9</td>
				<td class="j">10</td>
				<td class="k">11</td>
			</tr>
			<tr>
				<th class="no">0</th>
				<th class="img"><p>-</p></th>
				<th class="name">みかん</th>
				<td class="a">1</td>
				<td class="b">2</td>
				<td class="c">3</td>
				<td class="d">4</td>
				<td class="e">5</td>
				<td class="f">6</td>
				<td class="g">7</td>
				<td class="h">8</td>
				<td class="i">9</td>
				<td class="j">10</td>
				<td class="k">11</td>
			</tr>
			</tbody>
		</table>
	</div>
</div>

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script>
	var options = {
	valueNames: [ 'no','img', 'name', 'a', 'b','c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', ]
	};
	
	var userList = new List('users', options);
	userList.sort( '', {order : 'asc' });
</script>

<style>
	.sort.desc:after {
		content:"▼";
	}
	.sort.asc:after {
		content:"▲";
	}
</style>

CSS

<style b="text/css">

/* example_table */

.example_table {
	display: block;
	position: relative;
	overflow: scroll;
	width: calc(100%);
	height: calc(100vh);
	border-collapse: collapse;
	font-size: 0;
}

/* example_table セル*/
.example_table th,
.example_table td {
	display: inline-block;
	height: 3.0rem;
	background: #fff;
	font-size: 0.7rem;
	white-space: nowrap;
}

/* イメージ大きさ */
img.exampleicon {
	width: 3.0rem;
}

/* example_table 行*/
.example_table thead,
.example_table tbody {
	display: block;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
}

.example_table tbody th {
	position: -webkit-sticky;
	position: sticky;
	z-index: 1;
}

.example_table thead {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 4;
}

/* example_table 列*/

.example_table th.no,
.example_table td.no {
	display: inline-block;
	width: 1.3rem;
	line-height: 3.0rem;
	background: #fff;
	left: 0rem;
	z-index: 2;
}

.example_table th.img,
.example_table td.img {
	display: inline-block;
	width: 3.0rem;
	line-height: 3.0rem;
	background: #fff;
	left: 0rem;
	z-index: 2;
}

.example_table th.name,
.example_table td.name {
	display: inline-block;
	width: 10.0rem;
	line-height: 3.0rem;
	background: #fff;
	z-index: 1;
}

.example_table th.a,
.example_table td.a {
	display: inline-block;
	width: 2.5rem;
	line-height: 3.0rem;
	background: #fff;
	left: 0rem;
	z-index: 1;
}

.example_table th.b,
.example_table td.b {
	display: inline-block;
	width: 2.0rem;
	line-height: 3.0rem;
	background: #fff;
}

.example_table th.c,
.example_table td.c {
	display: inline-block;
	width: 2.0rem;
	line-height: 3.0rem;
	background: #fff;
}

.example_table th.d,
.example_table td.d {
	display: inline-block;
	width: 1.3rem;
	line-height: 3.0rem;
	background: #fff;
}


.example_table th.e,
.example_table td.e {
	display: inline-block;
	width: 1.3rem;
	line-height: 3.0rem;
	background: #fff;
}

.example_table th.f,
.example_table td.f {
	display: inline-block;
	width: 1.3rem;
	line-height: 3.0rem;
	background: #fff;
}

.example_table th.g,
.example_table td.g {
	display: inline-block;
	width: 1.3rem;
	line-height: 3.0rem;
	background: #fff;
}

.example_table th.h,
.example_table td.h {
	display: inline-block;
	width: 1.3rem;
	line-height: 3.0rem;
	background: #fff;
}


.example_table th.i,
.example_table td.i {
	display: inline-block;
	width: 1.3rem;
	line-height: 3.0rem;
	background: #fff;
}

.example_table th.j,
.example_table td.j {
	display: inline-block;
	width: 1.3rem;
	line-height: 3.0rem;
	background: #fff;
}

.example_table th.k,
.example_table td.k {
	display: inline-block;
	width: 1.3rem;
	line-height: 3.0rem;
	background: #fff;
}


/* example_table 列固定場所*/


.example_table thead th.blank-no{
	position: -webkit-sticky;
	position: sticky;
	width: 1.3rem;
	line-height: 3.0rem;
	top: 0;
	left: 0;
	z-index: 4;
}

.example_table thead th.blank-img{
	position: -webkit-sticky;
	position: sticky;
	width: 3.0rem;
	line-height: 3.0rem;
	top: 0;
	left: 0;
	z-index: 5;
}

.example_table thead th.blank-name{
	position: -webkit-sticky;
	position: sticky;
	width: 10.0rem;
	line-height: 3.0rem;
	top: 0;
	left: 0rem;
	z-index: 4;
}



</style>
</head>

CSS デザイン部分

/* デザイン */
/* design */

body {
	font-family: 'Noto Sans', sans-serif;
	padding: .3rem;
}

/* ボックス周り影 */
.example_table {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.example_table:hover {
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}


.example_table table {
	border: 1px solid #CFD8DC;
}


/* デザイン セル*/
.example_table th {
	font-weight: bold;
}

.example_table td {
	font-weight: normal;
	text-align: center;
}

/* デザイン tbody th*/
.example_table tbody th.no {
	text-align: center;
}

.example_table tbody th.img {
	text-align: center;
}

.example_table tbody th.name {
	text-align: center;
}

.example_table tbody th.a {
	text-align: center;
}

.example_table thead th {
	background: #000000;
	color: #E0E0E0;
	text-align: center;
}

/* デザイン thead th*/
.example_table thead th.no {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table thead th.img {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table thead th.name {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table thead th.a {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table thead th.b {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table thead th.c {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table thead th.d {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table thead th.e {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table thead th.f {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table thead th.g {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table thead th.h {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table thead th.i {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table thead th.j {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table thead th.k {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.example_table tbody tr:nth-child(even) th {
	background: #222222;
	color: #FFFFFF;
}
.example_table tbody tr:nth-child(even) td {
	background: #f0f0f0;
}
.example_table tbody tr:nth-child(odd) th {
	background: #222222;
	color: #FFFFFF;
}
.example_table tbody tr:nth-child(odd) td {
	background: #FAFAFA;
}

Comments

[yukihisa]

現象が再現できるソースの提示をお願いします。

[m.ts10806]

文章だけでは説明の限界があります。画面キャプチャなど提示してください。また再現確認のためにHTMLなど関連するコードも全て提示してください。

[m.ts10806]

Webにおける表示確認とは、OSではなくブラウザによるものなので、現象が確認されたブラウザとバージョンを提示してください。

[yukihisa]

IEはそもそもposition:stickyは未対応ですがその辺りはいいのでしょうか？

Answer 1

とりあえず、当方Windows7、Chromeで確認しましたが問題なく（？）動きました。
？としたのはstickyの使い方が悪い部分があったためです。
表の「名前」列タイトルがで固定され、表明細はイメージ列で固定されているため、横にスクロールすると各明細列が「名前」列タイトルの下に隠れてしまっています。

現象を確認したブラウザはなんでしょうか？

Comments

[rokujyoma]

問題があったブラウザはInternet Explorer Ver.11.0.70です。
自分もWindows7なのですがGoogle Chromeではちゃんと動きました。
名前列のところはミスです。ご指摘ありがとうございます。

[rokujyoma]

Internet Explorerでposition:stickyが未対応なのは知りませんでした。
おそらくその所為ですね。お手数おかけしてすみません。

[yukihisa]

原因はstickyではないです。
IEは自動でセル幅を変えてしまうという困った仕様があるので、table に対して table-layout:fixed 及び固定したい幅を指定してあげる必要があります。
ちょっと現象確認とソース確認に時間がかかってしまい回答が遅れ申し訳ない。
また、CSSに無駄な記載が多いように見受けられます。
たとえば.example_tableはテーブルの要素に対して必要ありません。
また、.img等は二行に分けずにそのまま.imgのみで大丈夫です。
他とかぶっているならもう少し簡潔にできるよう命名規則を再考したほうがよいです。