Currently, I am facing an issue with my table where the green span elements (a,b,c,d,e,f) are not wrapping properly to have equal column widths. The first column is taking its width from the spans and all are in one line, which is not the desired outcome. I have tried adjusting the display and word-wrap options but nothing seems to be working.
body {
background-color: #444;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
font-size: 30px;
height: 40px;
text-align: center;
}
td {
width: 100px;
}
.goods td:nth-child(1){
color:green;
}
.goods span{
border: 1px solid green;
border-radius:15px;
padding-right: 5px;
width:13px;
cursor:pointer;
}<table id="main">
<tr>
<td>K</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>*</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
</tr>
<tr class="goods">
<td><span id="good1">a</span><span id="good2">b</span><span id="good3">c</span><span id="good4">d</span><span id="good5">e</span><span id="good6">f</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><span id="ship">+</span></td>
</tr>
</table>