在表格单元格内换行答案

【问题标题】：Wrap spans inside a table cell在表格单元格内换行
【发布时间】：2017-10-07 15:25:53
【问题描述】：

我有这张表，我尝试包装绿色跨度元素（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>

【问题讨论】：

标签： html css html-table css-tables

【解决方案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>

【讨论】：

在跨度上放一个宽度，它将每个人放在一个单独的行中（请参阅更新的问题）。我想尽可能多地保持相同的列宽。
惭愧，原来这么简单，我怎么错过了？

【解决方案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>

【讨论】：