我可以在同一个表列中包含文本和div吗？

Question

我目前有一个静态表，因为我总能期望得到相同的结果。我有一些标题，其中我结合了2列，然后是theres数据。它看起来与此类似：

table {
  border-collapse: collapse;
  empty-cells: hide;
  text-align: left;
}

td {
  text-align: left;
  border: 1px solid #a7a7a7;
  padding: 5px;
}

<table>
    <tr>
        <td colspan=2><b>Headline 1</b></td>
    </tr>
    <tr>
        <td> Description a </td>
        <td> Data a </td>
    </tr>
    <tr>
        <td> Description b </td>
        <td> Data b </td>
    </tr>
    <tr>
        <td> Description c </td>
        <td> Data c </td>
    </tr>
    <tr>
        <td colspan=2><b>Headline 2</b></td>
    </tr>
    <tr>
        <td> Description d </td>
        <td> Data d </td>
    </tr>
    <tr>
        <td> Description e </td>
        <td> Data e </td>
    </tr>
    <tr>
        <td> Description f </td>
        <td> Data f </td>
    </tr>
</table>

现在我想添加一个小图标，用户可以单击该图标打开帮助菜单，该菜单解释了显示的数据。我尝试通过在同一div中添加td来解决此问题，但它会强制我的div进入新行。见下文： （注意：我不会有文字，但是13px乘13px background-image。div内的文字是显示新行，新行不是因为文字。

table {
  border-collapse: collapse;
  empty-cells: hide;
  text-align: left;
}

td {
  text-align: left;
  border: 1px solid #a7a7a7;
  padding: 5px;
}

div.icon {
  width: 13px;
  height: 13px;
}

<table>
    <tr>
        <td colspan=2>
            <b>Headline 1</b>
            <div class="icon">example</div>
        </td>
    </tr>
    <tr>
        <td> Description a </td>
        <td> Data a </td>
    </tr>
    <tr>
        <td> Description b </td>
        <td> Data b </td>
    </tr>
    <tr>
        <td> Description c </td>
        <td> Data c </td>
    </tr>
    <tr>
        <td colspan=2><b>Headline 2</b></td>
    </tr>
    <tr>
        <td> Description d </td>
        <td> Data d </td>
    </tr>
    <tr>
        <td> Description e </td>
        <td> Data e </td>
    </tr>
    <tr>
        <td> Description f </td>
        <td> Data f </td>
    </tr>
</table>

我的问题是否有任何已知的解决方案？

Answer 1

你需要给你的div显示：inline

table {
  border-collapse: collapse;
  empty-cells: hide;
  text-align: left;
}

td {
  text-align: left;
  border: 1px solid #a7a7a7;
  padding: 5px;
}

div.icon {
  width: 13px;
  height: 13px;
}

.icon {
  display: inline;
}

<table>
  <tr>
    <td colspan=2><b>Headline 1</b><div class="icon">example</div></td>
  </tr>
  <tr>
    <td> Description a </td>
    <td> Data a </td>
  </tr>
  <tr>
    <td> Description b </td>
    <td> Data b </td>
  </tr>
  <tr>
    <td> Description c </td>
    <td> Data c </td>
  </tr>
  <tr>
    <td colspan=2><b>Headline 2</b></td>
  </tr>
  <tr>
    <td> Description d </td>
    <td> Data d </td>
  </tr>
  <tr>
    <td> Description e </td>
    <td> Data e </td>
  </tr>
  <tr>
    <td> Description f </td>
    <td> Data f </td>
  </tr>
</table>