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



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>

最佳答案

默认情况下,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>

10-07 19:19
查看更多