カラムに2桁の数字を入力したときに作成されたスペースを削除します。ここでテーブルのスペーシング間隔を削除する方法
CSSのいくつか：ここで
はフィドルコードがある
table {
width: 85%;
margin: 0 auto;
max-height: 400px;
border-collapse: collapse;
}
table td {
font-size: 14px;
color: #fff;
text-align: center;
max-height: 20px;
direction: rtl;
}
table th, td {
padding: 7px;
}
table.to th, td {
padding: 0;
}
あなたは同じ幅ですべての列を持っていたいですか？
table td {
width:7%;
font-size: 14px;
color: #fff;
text-align: center;
max-height: 20px;
direction: rtl;
}
// EDIT：overflow:hiddenとmax-widthを使用して
body {
margin: 0;
padding: 30px;
font-family: 'Source Sans Pro', sans-serif;
direction: rtl;
background-color:#000;
}
table {
width: auto;
margin: 0 auto;
/*transform: scale(0.9);*/
max-height: 400px;
border-collapse: collapse;
}
table th {
color: #9ebbf3;
height: 0.3%;
background: linear-gradient(to bottom, rgba(57,71,82,0.4) 0%,rgba(40, 40, 52, 0.31) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3394752', endColorstr='#d6282834',GradientType=0);
}
table td {
padding: 0 20px;
font-size: 14px;
color: #fff;
text-align: center;
max-height: 20px;
direction: rtl;
}
table th, td {
padding: 7px;
}
table tr td:last-child {
color: #ffdf32;
}
table tr th:last-child {
color: #ffdf32;
font-weight:500;
}
table.to th, td {
padding: 0;
}
table.to th {
color: #ffdf32 !important;
font-weight: 500 !important;
}
table tr {
border:none!important;
}
table td {
border-left: 1px solid;
max-height: 20px;
border-color: #425559;
}<table id="reTable" class="to" dir="ltr">
<tr cellspacing="0">
<th cellpadding="0">10</th>
<th>999</th>
<th>8</th>
<th>7</th>
<th>6</th>
<th>5</th>
<th>4</th>
<th>3</th>
<th>2</th>
<th>1</th>
<th>(1)1</th>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>x</td>
<td>1</td>
<td>x</td>
<td>2</td>
<td>1</td>
<td>x</td>
<td>4(1)</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>x</td>
<td>1</td>
<td>x</td>
<td>1</td>
<td>x</td>
<td>1</td>
<td>5(1)</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>1</td>
<td>x</td>
<td>x</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>6(1)</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>x</td>
<td>1</td>
<td>x</td>
<td>2</td>
<td>x</td>
<td>7(1)</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>x</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>x</td>
<td>1</td>
<td>8(1)</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>x</td>
<td>2</td>
<td>1</td>
<td>x</td>
<td>1</td>
<td>9(1)</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>x</td>
<td>x</td>
<td>1</td>
<td>1</td>
<td>x</td>
<td>x</td>
<td>10(1)</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>x</td>
<td>1</td>
<td>x</td>
<td>1</td>
<td>x</td>
<td>2</td>
<td>11(1)</td>
</tr>
<tr>
<td>2</td>
<td>x</td>
<td>2</td>
<td>1</td>
<td>x</td>
<td>2</td>
<td>x</td>
<td>1</td>
<td>x</td>
<td>2</td>
<td>12(1)</td>
</tr>
<tr>
<td>2</td>
<td>x</td>
<td>2</td>
<td>1</td>
<td>x</td>
<td>x</td>
<td>1</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>13(1)</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>x</td>
<td>1</td>
<td>x</td>
<td>1</td>
<td>x</td>
<td>14(1)</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>x</td>
<td>2</td>
<td>x</td>
<td>2</td>
<td>x</td>
<td>1</td>
<td>15(1)</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>x</td>
<td>1</td>
<td>x</td>
<td>2</td>
<td>x</td>
<td>16(1)</td>
</tr>
</table>はい、しかしsmae最小幅！ – alonblack
tdパディングを変更することができます。 100％幅の表を削除することを忘れないでください。このようなもの：table td {padding：0 20px; } –
余分なスペースを拡大することthをさせません！
N.B：これは、私は列に2桁の数字を入れたときに作成したスペースを削除したい
のために行われます。
あなたは、このようにオーバーフローが
table.to th {
color: #ffdf32 !important;
font-weight: 500 !important;
overflow: hidden;
max-width: 4px; //use max width as you prefer
}
いつもあなたのコードにいくつかの説明を追加してください... – andreas
あなたの助言のために兄弟ありがとう！ –
を使用求めているとより3 THN桁を使用すると、
thの長さをオーバーフローする可能性があるとして、フィドルのリンクを追加するために、Uを試してみてください？ – SESN列に.. – alonblack
問題は解決しました！以下の答えをチェックしてください！ –