html - 将 span 换行到表格单元格内

Question

我有这个表格，我尝试包装绿色跨度元素(a，b，c，d，e，f)，以便所有列具有相同的宽度，并将额外的跨度放在同一单元格的额外行中，增加高度。就像现在一样，第一列的宽度来自跨度，并且所有列都在一行中。我尝试更改显示和自动换行选项，但什么也没做。

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>

Answer 1

span 默认情况下是内联元素，因此您必须将 display 属性更改为 inline-block。

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;
  display: inline-block;
}

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