I have this table, I try to wrap the green span elements (a,b,c,d,e,f) so that all columns have the same width and put the extra spans in extra lines of the same cell increasing the height. As it is now, the first column takes its width from the spans and all are in one line. I tried changing the display and word-wrap options but did nothing.

```css
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;
}
```

```html
<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>
```