html - 将 TD 元素并排放置

Question

我有一个小(也许很简单)的问题。我现在有一个显示为普通表格的表格。

------------------- 
| item 1 | item 4 |
------------------- 
| item 2 | item 5 |
------------------- 
| item 3 | item 6 |
-------------------

这适用于大多数页面(布局方面)但我在另一个页面上有同一张表，该表的布局不适合它所在的 div。所以我在想可以我使用 CSS 将表格数据彼此对齐:

------------------------------------------------------- 
| item 1 | item 2 | item 3 | item 4 | item 5 | item 6 |
-------------------------------------------------------

我尝试了一些使用 google 发现的东西。 display:inline-block;,display:inline-table;,float:left。现在这可能吗？我知道您可以使用 display:block 以相反的方式进行。

这是我的 HTML:

<table>
    <tr>
        <td><i class='fa fa-users' aria-hidden='true'></i></td>
        <td><p>". chop($str,"-999") . "</p></td>
    </tr>
    <tr>
        <td><i class='fa fa-clock-o' aria-hidden='true'></i></td>
        <td><p>" . $row["Tijdsduur"] . "</p></td>
    </tr>
    <tr>
        <td><i class='fa fa-euro' aria-hidden='true'></i></td>
        <td><p><small>" . $var . "</small></p></td>
    </tr>
</table>  

Answer 1

I've tried a couple of things I found using google. display:inline-block;

这样就可以了。

td { border: solid black 1px; }
tr, td { display: inline-block; }

<table>
  <tr>
    <td><i class='fa fa-users' aria-hidden='true'></i></td>
    <td>
      <p>". chop($str,"-999") . "</p>
    </td>
  </tr>
  <tr>
    <td><i class='fa fa-clock-o' aria-hidden='true'></i></td>
    <td>
      <p>" . $row["Tijdsduur"] . "</p>
    </td>
  </tr>
  <tr>
    <td><i class='fa fa-euro' aria-hidden='true'></i></td>
    <td>
      <p><small>" . $var . "</small></p>
    </td>
  </tr>
</table>