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을 사용한다. 내가 구글을 사용하여 발견 몇 가지를 시도했습니다

<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

:

여기 내 HTML입니다. 디스플레이 : 인라인 블록;

그리고 그렇게 할 것입니다. 그렇게 단순

Answer 2

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>

는 ..

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