在網頁設計中，表格作為一種常見的排版元素被廣泛使用。然而，當表格中的內容長度超過單元格寬度時，文字就會溢出單元格而導致頁面排版混亂。為了解決這個問題，我們可以使用CSS的text-overflow屬性讓溢出的部分以省略號的形式顯示。

table {
width: 100%;
border-collapse: collapse;
}
td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

上述CSS代碼中，將table元素的寬度設置為100%以使其自適應父容器，同時將表格邊框合并。然后將td元素的overflow屬性設置為hidden，white-space屬性設置為nowrap，使單元格內容在單行內顯示且超出單元格寬度時自動隱藏。最后使用text-overflow: ellipsis屬性將超出部分截斷并以“...”的形式顯示。

以上方法只適用于單行文本內容的顯示，如果單元格中包含多行文本，我們可以將單元格內容包裹在一個容器元素內，并將容器元素的高度限制在單元格高度范圍內。

td {
position: relative;
height: 50px;
}
td .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}

上述代碼中，我們給td元素設置了相對定位，并將其高度設置為50像素。然后在單元格內添加一個div容器，并將其設置為絕對定位，同時讓其左上角對齊單元格的左上角。接著將容器的寬度設置為100%，用來自適應單元格寬度。最后使用overflow: hidden和text-overflow: ellipsis屬性來實現溢出部分的截斷和省略號顯示。

綜上所述，通過使用text-overflow屬性，我們可以實現在表格中超出部分以省略號的形式顯示，以保持頁面的整潔和美觀。