在表格单元格中包裹跨度

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

默认情况下，

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需在span CSS

中添加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>