I want to remove the spacing that created when I put 2 digits on a column.
Here is the fiddle code:
Here some of the 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;
}
You want to have all columns with the same width?
table td {
width:7%;
font-size: 14px;
color: #fff;
text-align: center;
max-height: 20px;
direction: rtl;
}
//EDIT:
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>
using max-width with overflow:hidden won't let th to expand with extra spaces!
N.B: This is done for
I want to remove the spacing that created when I put 2 digits on a column.
as you have asked and using digits more thn 3 might overflow the length of the the th thus overflow used
table.to th {
color: #ffdf32 !important;
font-weight: 500 !important;
overflow: hidden;
max-width: 4px; //use max width as you prefer
}
