行的HTML表格佈局

我的表格有兩行。最上面一行包含一些文本，最下面一行包含一個按鈕。如果文本超出可用空間（例如，如果瀏覽器窗口已調整大小），我總是喜歡按鈕停留在頁面的底部，頂部一行顯示滾動條。行的HTML表格佈局

我已經能夠使用下面的代碼保持按鈕底部，但是當我調整瀏覽器的大小時，它開始與頂部的文本重疊。我也沒有能夠在第一排上獲得滾動條。

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     .bottomRow { 
     position: fixed; 
     bottom: 0 
     } 
    </style> 
    </head> 

    <body> 
    <table> 
     <tr> 
     <td> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum felis enim, sit amet laoreet orci imperdiet ac. Etiam viverra suscipit finibus. Donec in lectus sed odio sagittis ultrices ut sed nunc. Ut non ornare dolor. In vel nibh vestibulum, tincidunt eros eu, fermentum nunc. Integer non fermentum purus, non molestie lorem. Nunc sit amet dapibus tortor. Aliquam non felis commodo, mollis nibh non, pharetra mauris. Suspendisse nisi libero, maximus a vulputate a, condimentum et massa. Integer quis feugiat mi. In sit amet ante sed nisi facilisis commodo. Cras porttitor cursus diam in tincidunt. Phasellus nec varius dui, eget luctus mi </p> </td> 
     </tr> 

     <tr> 
     <td class="bottomRow"> <button>OK</button> </td> 
     </tr> 

    </table> 
    </body> 
</html>

有人可以讓我知道如何解決這些問題嗎？如果沒有更好的方式來實現相同的效果而不使用表格，我也很好。

謝謝，

來源

2015-01-17 rkumar310

**表格單元格沒有滾動條**您需要使用'div'標籤。 – ilgaar

有沒有這樣的事情作爲表格單元格的滾動條。您需要通過在單元格內具有固定高度的div來欺騙滾動條顯示，並將overflow-y設置爲滾動。然後你的所有內容都進入div。

<tr> 
    <td> <div style='height:200px;overflow-y:scroll;'> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum felis enim, sit amet laoreet orci imperdiet ac. Etiam viverra suscipit finibus. Donec in lectus sed odio sagittis ultrices ut sed nunc. Ut non ornare dolor. In vel nibh vestibulum, tincidunt eros eu, fermentum nunc. Integer non fermentum purus, non molestie lorem. Nunc sit amet dapibus tortor. Aliquam non felis commodo, mollis nibh non, pharetra mauris. Suspendisse nisi libero, maximus a vulputate a, condimentum et massa. Integer quis feugiat mi. In sit amet ante sed nisi facilisis commodo. Cras porttitor cursus diam in tincidunt. Phasellus nec varius dui, eget luctus mi </p> </div> </td> 
    </tr>

我不知道爲什麼你有問題讓你的按鈕保持底部？你能再細說一下嗎？你的按鈕發生了什麼？

來源

2015-01-17 14:33:19

我試過使用div，它工作，但我可以得到沒有指定高度的滾動條？我希望頂部行的高度是瀏覽器窗口中可用的高度（因此在這個意義上高度不是固定的）。我也能夠得到按鈕的底部，但如果我減少瀏覽器窗口的高度，並使其太短，按鈕開始重疊頂部行的文本。我猜這是有道理的，因爲瀏覽器試圖將它保持在底部，但有一些方法始終將它放在最上面一行的文本之下。 – rkumar310

我會嘗試設置底部行的min-width屬性。這將確保您的按鈕在底部行中始終有足夠的空間，並保持頂部不受侵犯。您需要以某種方式指定div的高度以便滾動。請嘗試使用％值而不是像素值來實現您的目標。我仍然不完全清楚你在這裏的最終結果，如果我能看到頁面的樣本，這將有所幫助。 –

請看下面的鏈接 http://jsfiddle.net/qcuprnu9/ 如果你現在減小瀏覽器窗口的高度，你會注意到Ok按鈕開始重疊在頂部的文本。我還希望在瀏覽器窗口中沒有足夠的空間來顯示所有文本後滾動條出現。請讓我知道，如果它仍然不清楚。 – rkumar310

行的HTML表格佈局

回答

相關問題