HTML - 가로로 2 개의 테이블 나란히 나란히

다시 나야. 나는 서로 옆에 테이블을 얻으려고 노력하고있다. 그러나 이것이 내가 가진 것이다. 그러나 나는 무엇을 ', 당신이 당신의 복사 및 붙여 넣기의 시작부터 HTML의 몇 줄을 놓치고 생각 enter image description here HTML - 가로로 2 개의 테이블 나란히 나란히

<tr> 
<th> 
     <span onclick="toggleDiv('favData', 'favDataImg')" style="cursor: hand;">Favorites <img name="favDataImg" src="../images/minus.gif" /></span> 
</th> 
</tr> 
<tr> 
    <td style="width: 300px; text-align: left; padding-right: 30px;"> 
<div id="favData" style="display: block;"> 
<fieldset style="width: 240px;"> 
<legend>Favorites</legend> 
<table border="0" align="left"> 

<input type="radio" name="publicRadio" value="Public" >Public: </input> 

<select name="publicDropDown"> 
<option value="Public Dropdown" selected="selected">Public Dropdown</option> 
</select> 

<br><br> 
<input type="radio" name="userRadio" value="User" >User: </input> 

<select name="userDropDown"> 
<option value="User Dropdown" selected="selected">User Dropdown</option> 
</select> 

<br><br> 
<input type="radio" name="customRadio" value="Custom" >Custom: </input> 

</table> 
</fieldset> 


<fieldset style="width: 240px;"> 
<legend>Favorites</legend> 
<table border="0" align="left"> 

<input type="radio" name="publicRadio" value="Public" >Public: </input> 

<select name="publicDropDown"> 
<option value="Public Dropdown" selected="selected">Public Dropdown</option> 
</select> 

<br><br> 
<input type="radio" name="userRadio" value="User" >User: </input> 

<select name="userDropDown"> 
<option value="User Dropdown" selected="selected">User Dropdown</option> 
</select> 

<br><br> 
<input type="radio" name="customRadio" value="Custom" >Custom: </input> 

</table> 
</fieldset> 



</div> 
</td> 
</tr>

출처

2012-01-18 Doc Holiday

이 전체 코드인가? 예인 경우 블록 주위에 '

...

'을 추가해야합니다 (문제가 해결되지는 않지만 코드가 개선 될 것입니다). –

Yahoo를 사용하는 경우 Google을 사용해보세요.) Joke. 당신의 float (float :)을 적절하게 설정하고 그것과 함께'position : relative;'위치 지정 메소드를 사용하십시오. –

음 ...이 코드는 다른 웹 페이지의 포함입니다 .... 감사합니다 –

감사합니다 ... 코드가 ?? 들여 쓰기되지 않는 이유를 모르겠어요 첫 번째 필드 세트의 CSS에 float:left을 추가하면됩니다.

출처

2012-01-18 20:56:23 SpoonNZ

추가 :

fieldset 
{ 
    float: left; 
}

당신의 CSS합니다. HTML을 http://jsfiddle.net/S3n6D/으로 복사하고 해당 CSS를 추가했습니다. 거기에서 결과를 볼 수 있습니다.

출처

2012-01-18 20:56:52

여전히 서로 위에 더했습니다 –

당신은 정상적인 문서 플로트 수행하기 위해 사용자의 테이블에 CSS 규칙을 적용해야 :

table{ float:left; }

또는

<table style="float: left;">.........</table>

PS : 그냥 그 확인을 이 태그 선택기 블록은 그렇지 않은 다른 테이블에 영향을주지 않습니다. 그렇지 않으면 ID 또는 클래스 선택기를 사용하는 것이 좋습니다.

출처

2012-01-18 21:04:17

계속 서로 위에 –

표에 display: table-cell;을 추가하면 도움이 될 수 있습니다. http://www.quirksmode.org/css/display.html 그리고 display: table;과 함께 배치 div를 추가하거나 페이지 구조에 따라 일부 요소에 해당 속성을 추가해야 할 수도 있습니다.

출처

2012-01-19 13:55:04

ok ... 시도해보십시오. 감사합니다 ... –

도움이되지 않은 것 같습니다 ... 이것은 실망 스럽습니다 –

시도'디스플레이 : 인라인 블록; 종종 완벽하게 작동합니다. – nonchip

<!DOCTYPE html> 

<html> 
<head> 
<title>tables sideXside2</title> 
<style> 

table, td { border-width: 2px; border-style: solid; border-collapse: collapse; padding: 15px; color: #000000; text-align: center; } 

table.pos_fixed1 { position:fixed; top:30px; left:10px; } 

table.pos_fixed2 { position:fixed; top:30px; left:250px; } 

table.pos_fixed3 { position:fixed; top:30px; left:490px; } 

</style> 

</head> 
<body> 

<table summary="" width="10%" class="pos_fixed1"> 
<tr><td>1</td><td>2</td><td>3</td></tr> 
<tr><td>4</td><td>5</td><td>6</td></tr> 
<tr><td>7</td><td>8</td><td>9</td></tr> 
</table> 

<table summary="" width="10%" class="pos_fixed2"> 
<tr><td>A</td><td>B</td><td>C</td></tr> 
<tr><td>D</td><td>E</td><td>F</td></tr> 
<tr><td>G</td><td>H</td><td>I</td></tr> 
</table> 

<table summary="" width="10%" class="pos_fixed3"> 
<tr><td>i</td><td>ii</td><td>iii</td></tr> 
<tr><td>iv</td><td>v</td><td>vi</td></tr> 
<tr><td>vii</td><td>viii</td><td>ix</td></tr> 
</table> 

</body> 
</html>

출처

2014-01-10 16:32:23 user3146843

이 답변은 크리스 베이커의 answer 중복 질문에서 가져옵니다. 그의 대답에 투표하십시오. http://jsfiddle.net/SM769/

문서 :

<table style="display: inline-block"> <table style="float: left">

이 페이지는 이미 시도하고 브라우저에서 어떻게 보이는지 볼 수있는 HTML로 설정입니다 : 내용과 공간에 따라

한 float: left를 사용하거나 display: inline-block

MDN -의 CSS display MDN에
CSS float - https://developer.mozilla.org/en/CSS/float

예

<table style="float: left"> 
    <tr> 
     <td>..</td> 
    </tr> 
</table> 

<table style="float: left"> 
    <tr> 
     <td>..</td> 
    </tr> 
</table>

출처

2014-01-22 15:08:18 Nathan

<!DOCTYPE html> 
<html> 
<body> 

<table style="float: left; border-collapse:collapse; " border=\"1px;\" > 
    <tr> 
    <td>Jill</td> 
    <td>Smith</td>  
    <td>50</td> 
    </tr> 
    <tr> 
    <td>Eve</td> 
    <td>Jackson</td>   
    <td>94</td> 
    </tr> 
    <tr> 
    <td>John</td> 
    <td>Doe</td>   
    <td>80</td> 
    </tr> 
</table> 


<table style="border-collapse:collapse; " border=\"1px;\"> 
    <tr> 
    <td>Jill jill</td> 
    <td>Smith</td>  
    <td>50</td> 
    </tr> 
    <tr> 
    <td>Eveeve</td> 
    <td>Jackson</td>   
    <td>94</td> 
    </tr> 
    <tr> 
    <td>Johnjohj</td> 
    <td>Doe</td>   
    <td>80</td> 
    </tr> 
</table> 

</body> 
</html>

출처

2015-09-16 06:44:15

HTML - 가로로 2 개의 테이블 나란히 나란히

답변

관련 문제