2017-08-27 105 views
1

我有兩張我希望彼此相鄰的桌子。 「mytable」需要以「myinput」爲中心放在屏幕上。 「mytable1」需要在「mytable」的右側,甚至是在頂端。我無法設法讓代碼正確。我用內嵌塊向前扔了一些我嘗試過的內容,然後將「myinput」移動到左邊。桌子與第一張桌子頂部並排輸入/搜索

This is the layout I'm looking to do

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search by any part of name or speed code" title="Type in a name"> 
 
    
 
    <table id="myTable" align="center" style="display: inline-block;"> 
 

 
\t <tr> 
 
\t <td>Albert Einstein College of Medicine</td> 
 
\t <td>718-904-2444</td> 
 
\t <td>123</td> 
 
\t </tr> 
 
\t <tr> 
 
\t <td>Bronx Lebanon Hospital Center</td> 
 
\t <td>718-518-5118</td> 
 
\t <td>123</td> 
 
\t </tr> 
 
\t 
 
\t 
 
    </table> 
 

 
    <table id="myTable1" style="float: right;"> 
 
    <tr> 
 
\t <td>1</td> 
 
\t </tr> 
 
\t <tr> 
 
\t <td>2</td> 
 
\t </tr> 
 
\t <tr> 
 
\t <td>3</td> 
 
\t </tr> 
 
    </table>

回答

-1
<div align="center"> 
<table id="myTable" align="center" style="display: inline-block;"> 
<tbody> 
<tr style="text-align: center;"> 
    <td><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search by any part of name or speed code" title="Type in a name"></td> 
</tr> 
<tr> 
<td>Albert Einstein College of Medicine</td> 
<td>718-904-2444</td> 
<td>123</td> 
</tr> 
<tr> 
<td>Bronx Lebanon Hospital Center</td> 
<td>718-518-5118</td> 
<td>123</td> 
</tr> 
</tbody></table> 

<table id="myTable1" style="display: inline-block;"> 
<tbody><tr> 
<td>1</td> 
</tr> 
<tr> 
<td>2</td> 
</tr> 
<tr> 
<td>3</td> 
</tr> 
</tbody></table> 
</div> 
+0

我不知道你想要什麼,但請檢查該代碼。 –

+0

由於某種原因,當我用這種方式編碼時,我的輸入欄位於桌子的底部。這可能不是你的錯,儘管它可能是我當前使用jQuery的CSS。我可能需要發佈更多我的代碼才能正確使用。 – Daeidon

+0

我添加了一個我正在嘗試做的事情的圖像。 – Daeidon